Vue-Cli 2.X版本的打包优化简述

打包优化，我认为原则就是 将进行代码压缩，将一个大文件拆分为细碎的小文件。越碎越好。因为技术有限，打包优化只是进行了5个方面的优化，对于小项目来说 应该已经可以了。

1.异步加载路由。

通过  const Login = (resolve) => require(['view/login'], resolve) 方式进行路由的懒加载。虽然  const Index = () => import('@/view/index') 这种方式也能减少打包体积，但是好像效果不是很明显

2.去掉.map文件。

Vue项目打包以后，会出现很多的已.map结尾的文件，这个文件其实主要是用来追踪错误的。如果运行有问题，能提示你代码第几行有问题。在生产环境中很明显这个是不需要的。

所以找到 config文件夹下的index.js.找到  productionSourceMap:true, 将 true改为 false.这样就能减少不必要的文件。

 

3.第三方库提取，同时锁定版本号。

在原始的jq项目中，我们都知道项目优化是可以通过将一些资源库通过cdn的方式引入到项目中。例如 jqury，bootstrap,等。Vue项目当然也是可以通过这种方式进行优化。
找到build文件夹，里面有个webpack.base.conf.js文件。在entry下面 我们可以添加一个字段 externals：{'vue': 'Vue', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'axios': 'axios'}，然后在项目的根目录下找到index.html文件，在里面加上对应的库的CDN地址：

　　<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

　　<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

　　<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>

　　<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

　　<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

4. CSSM模块化。将webpack.prod.conf.js中 设置css allChunks字段变为false，这一步就是将所有的css文件进行拆分。

5. 大图片压缩处理，使用 image-webpack-loader。具体用法自己百度一下吧。有很多。