vue项目打包优化

最近入职了新公司，接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化，把经验分享出来，注意本分享只针对打包大小上做的优化。

打包分析

vue cli已经集成了打包分析可直接使用，在package.json中script中加入"report": "vue-cli-service build --report"，执行npm run report打包会生成report.html文件，直接在浏览器打开可查看各个包的大小，对其进行针对性分析，优化。如下图。

打包优化

1.减少无用库的引用

因为该vue项目是从一个大的项目中拆解出来的，在拆解时有些代码会一股脑复制过来，会有一些没用到的库的引用也复制了。如上图umy-ui和highcharts被打包在项目中，虽然在项目的main.js中被引用，但实际没有使用到，删除他们的引用，项目打包体积从35M左右减小到29.4M。

2.按需引入

如上图echarts关联了543个模块，项目中实际用到的图表并不多，echarts官方支持按需加载。按需引入组件可减小打包体积，在项目中按需引入，最后ecahrts打包后的结果只关联了20个模块。打包体积缩小到26.6M。优化后打包结果如下

3.去除依赖重复引入

从上图