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.去除依赖重复引入

从上图可发现xlsx和bn.js依赖被重复多次打包,可对其进行优化。在vue.config.js中加入如下配置

configureWebpack: {
    resolve: {
      alias: {
        "bn.js": path.resolve(process.cwd(), "node_modules", "bn.js"),
        "xlsx": path.resolve(process.cwd(), "node_modules", "xlsx"),
      }
    }
}

优化后打包结果如下

4.关闭sourcemap

发布线上版本时可关闭sourcemap减少打包体积，在项目中关闭后文件大小可减小至4.88M。可以发现关闭sourcemap后打包体积大幅减小。对移动端项目来说，对流量和网速很敏感，关闭sourcemap可以提高加载的速度。但在PC端可以不考虑网速和流量开启sourcemap可方便我们在线上定位问题和调试，视项目情况决定是否开启

总结

经过以上几点的优化，项目的打包大小从35M缩小至4.88M,缩小了接近90%的大小。各位小伙伴也赶快对自己的项目进行打包优化吧