vue-cli 将静态资源文件放到 static 文件夹下并引用:

  1. 将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下
  2. index.html 修改

    添加script引入
<script src="static/js/vue.min.js"></script>
<script src="static/js/vue-router.min.js"></script>
  1. 修改 build/webpack.base.conf.js 文件:

    注释掉下面这行
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// 'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

添加externals部分(externals 和 resource 同级)。

    externals: {
'vue': 'Vue',
'vue-router': 'VueRouter'
},

优化后,速度对比

优化前编译时长 优化后编译时长 优化前build时长 优化后build时长
300~400ms 200ms左右 8435ms 4332ms

优化前文件大小:

优化后文件大小:

vue-cli 2.x 项目优化之:引入本地静态库文件的更多相关文章

  1. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  2. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  3. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  4. vue-cli 项目优化之3种方法对比:本地静态库资源(推荐)、cdn、DllPlugin

    vue-cli 项目优化之3种方法对比:本地静态库资源(推荐).cdn.DllPlugin 事项 本地静态库资源 cdn DllPlugin 依赖 依赖cdn网站资源(有种完善方法:如果cdn引入不成 ...

  5. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  6. vue单页面应用项目优化总结(转载)

    转载自:https://blog.csdn.net/qq_42221334/article/details/81907901这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理 ...

  7. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  8. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  9. Pycharm初始创建项目和环境搭建(解决aconda库文件引入不全等问题)

    1.新建工程 1.选择新建一个Pure Python项目,新建项目路径可以在Location处选择. 2.Project Interpreter部分是选择新建项目所依赖的python库,第一个选项会在 ...

随机推荐

  1. HTML5触摸事件(touchstart、touchmove和touchend)

      HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...

  2. h5页面嵌入android app时遇到的问题

    1.h5页面 通过 .css("transform") 或 .style.transform 获取 transform属性,并通过 split 方法解析 页面translateY ...

  3. Python中常见字符串去除空格的方法总结

    Python中常见字符串去除空格的方法总结 1:strip()方法,去除字符串开头或者结尾的空格>>> a = " a b c ">>> a.s ...

  4. Python 时间

    import time # 时间戳: 从1970-01-01 00:00:00开始计算. 未来存储的时候用是时间戳 print(time.time()) # 格式化时间 print(time.strf ...

  5. GCC内置函数

    在C语言写的程序中,有时候没有包含头文件,直接调用一些函数,如printf,也不会报错,因为GCC内置和一些函数.如果包含了头文件,则去第三方库中链接这个函数,不再使用GCC内置的函数.每个编译器的内 ...

  6. 高级数据结构及应用 —— 使用 bitmap 进行字符串去重

    bitmap 即为由单个元素为 boolean(0/1, 0 表示未出现,1 表示已经出现过)的数组. 如果C/C++ 没有原生的 boolean 类型,可以用 int 或 char 来作为 bitm ...

  7. Python用re正则化模块在字符串查找特定字符串

    实验需要,在一个含有几亿个字符的txt文件中查找特定的字符串,首先用re模块进行查找 from time import clock import re start=clock() label_file ...

  8. fckeditor配置

    <!DOCTYPE html> <html > <head> <title>发布</title> <meta name="v ...

  9. Unity 3D调用Windows打开、保存窗口、文件浏览器

    Unity调用Window窗口 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...

  10. 多行文本用textarea而不是input type=textarea“”

    <textarea name="zhaiyao" id="" cols="35" rows="4">< ...