Vue -- vue-cli(vue脚手架) npm run build打包优化

　　这段时间公司新项目立项，开发组选用 Vue2.0 进行开发。固然也就一并用到 vue cli 进行自动化构建。结果在基础版本开发完成后，用 npm run build 命令打包上线时，发现如下几个问题。虽然这些问题对项目正常运行影响不大，可是却对性能影响比较大。

　　一、加载图片过多，过大时，加载缓慢；　　二、部署包过大，上传缓慢；

原本想偷个懒，优化的事放到之后再说，可是每次上传服务器，包太大本身都感受不爽。因此索性先优化了再说！

一、加载图片过多，过大时，加载缓慢；

　　缘由：

　　解决方案：

二、部署包过大，上传缓慢

　　缘由一：vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包，这就致使打包后的 vendor.js 文件过大，从而使得首次启动时下载 vendor.js 缓慢。

　　解决方案：像vue、axios、element-ui、iView 这些引入之后基本不会再进行修改的依赖能够经过cdn引入(固然前提是能够接入外网，并且网速不错)，没必要要打包到 vendor.js 中。具体写法以下：

　　①在项目 根目录 index.html 使用cdn节点引入各类依赖（前端所需的各类依赖安装大部分均可以在 https://cdn.bootcss.com/  上找到）

<!-- 先引入 Vue -->
<!--开发环境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 若是使用element-ui  则引入element-ui， 没找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 若是使用iView  则引入iView-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 两个UI框架能够同时添加，冲突覆盖不多-->

　　　　②在项目 根目录 build/webpack.base.config.js 中 module.exports 内添加 externals

externals: {
    'vue': 'Vue', 
    'axios':'axios',
    'element': 'element-ui'
},

　　　　③在项目 根目录 src/mian.js  中将以上经过CDN已经引入的依赖 import ... from ... 删除(如：import Vue from 'vue')，若没有删除则webpack仍是会把对应的依赖进行打包。

　　缘由二：vue-cli npm run build 命令打包时默认会生成 相对应的map文件，从而致使打包后的整个 static文件夹 过大(尤为是vendor.js.map最大)，使得部署和上传缓慢。项目打包代码通过压缩加密之后，若是运行时报错，输出的错误信息根本没法精肯定位是哪里的代码报错。但map文件就能够像未加密的代码同样，准确的输出是哪一行哪一列报错，这就是map文件的用处。（可是实际在项目上线以前会将全部的调试代码和日志代码所有删除，就算有map文件存在，实际上你也不知道在哪报错。除非是系统性bug致使系统卡死了，浏览器抛出错误，既然都是系统性bug了那么根本不能上线，因此map文件我的以为不必存在!）

　　　　

　　解决方案：将map文件干掉，固然这个干掉不是手动删除，而是在webpack打包时不产生map文件。

　　　　在项目 根目录 config/index.js  中  build 内找到  productionSourceMap: true,　把 true改成false。从而从新打包之后，系统就不会自动生成 map文件了。


　　　　

　　

　　缘由三：vue-cli npm run build 命令打包时 压缩优化不完全。这里 webpack 其实自带有一个优化打包的方法(Gzip 文件压缩)，只是 vue-cli 默认没有使用。

　　解决法案：①在项目 根目录config/index.js  中  build 内找到  productionGzip: false， 把 false改成true。与 productionSourceMap 恰好相反。

　　　　

      　　②安装插件 compression-webpack-plugin　　注:安装的时候带上版本号，如今 compression-webpack-plugin 2.0已出，默认该命令安装最新版，最新版本和当前的webpack不匹配，要报错。 

cnpm install --save-dev compression-webpack-plugin@1.1.12            //1.1最新版

      　　③compression-webpack-plugin安装完成后，npm run build 执行后会发现js文件夹内每一个js文件都有一个相对应的gz后缀文件，并且gz文件比相对应的js文件小不少。浏览器若是支持 g-zip 会自动查找有没有gz文件，找到了就直接加载gz文件而后本地解压并执行。

 

这一连串捣鼓操做完成后，再来看压缩后的两个dist文件夹，这区别那是大大的！