vue实践笔记系列九——打包优化提升首屏加载速度_江南春008_新浪博客

打包优化主要是减少打包后的文件体积，主要从以下两个方面入手

1、通过启用压缩，减小打包文件体积

1.安装compression-webpack-plugin插件，建议安装1.1.2版本，高版本会有报错，安装语句：npm install --save-dev compression-webpack-plugin@1.1.2

2.将config/index.js中的压缩属性productionGzip配置为true启用

3.webpack.base.conf.js中的output下如果有asset属性，需将属性名改为filename

友情提示：

1）compression-webpack-plugin插件需要安装1.1.2

2）webpack.base.conf.js中的output下的asset属性改为filename即可修复

2、将第三方插件剔除打包列表

将elementui、vue、echarts、ueditor等剔除打包列表

1.将elementui等js通过cdn或本地文件形式在index.html中引入，注意vue和elementui的引入顺序，vue在前，因为elementui依赖vue

2.在webpack.base.conf.js中配置要剔除的插件

3.在main.js及store下的index.js将vue和elementui的import语句注释掉

 

优化前后vendor.js大小对比

打包前1.08M，可以想象首页加载速度有多慢：

打包后未压缩前391kb，打包时间由55s缩短至32s，你以为这就完事了么，并没有！往下翻......

打包压缩后132kb，再次刷新下打包后的首页，感受一下速度吧！

想要进一步减小vendor.js的提交，详见vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度（减小vendor体积，会分割出多个js）

经过上面两步配置之后，重新打包即可看到效果，如何查看每个插件具体有多大，请见vue实践笔记系列十——打包详情分布插件