VueCLI3打包优化--抽离依赖包

Posted 2023-03-21

参考技术A

项目开发中，使用了很多依赖包，如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表（ echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：

从上图的分析包中，可以将以下插件抽离：

需要删除的依赖包

VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容，在 dist/report.html

更多请查看：
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

减少打包体积、加快打包速度，常规的优化有以下两种：

按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。

这里选择CDN的方式， 配置流程 ：

可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。

进行包分离以后，打包结果：

vue.config.js 的pages为：

修改如下的地方：

外部扩展(externals)
使用webpack的externals来指定echarts无法减少包的大小

vue-cli利用webpack-bundle-analyzer分析构建产物

vue-cli3 打包优化

参考技术A 当项目较大时往往会出现打包之后首屏加载时间较长，这样会导致用户体验较差，因此可以开启gzip压缩功能

1）如果是vue2.x，在vue项目中安装依赖并将config.js中的productionGzip改为true，开启Gzip压缩，npm install --save-dev compression-webpack-plugin

运行npm run build 打包项目，这时如果有提示报错ValidationError: Compression Plugin Invalid Options，则需要将build中的webpack.prod.conf.js中CompressionWebpackPlugin的设置由asset改为

filename，如图所示

再次运行npm run build打包，如果还有报错，提示TypeError: Cannot readproperty 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本：npm install --save-dev compression-webpack-plugin@1.1.2

最后再次打包

当发现打包文件中有很多.gz的文件时即是打包成功，最后后端服务器开启gzip配置就愉快的配置完成，再次打开地址后会发现首屏速度快了很多

2）  如果是vue-cli3的项目，在开启gzip时会稍有区别，在vue.config.js 中配置，先安装依赖cnpm i -D compression-webpack-plugin