随着公司项目不断增大,项目打包编译的时长也不断增加,尤其是在公司使用 jenkins 自动化部署以后更甚。由此我想到此问题可能是引入依赖过多而造成。通过 google 查看分析,终于找到相关问题并初步实践,方法如下:
1. 使用 webpack-bundle-analyzer 分析项目外部依赖大小
1 | # NPM |
官网显示的使用方法,需要在 webpack.config.js 内配置:
1 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; |
而我们的项目是使用 vue-cli3 搭建,其内置 webpack (也就是没有 webpack.config.js),因此我们找到 vue.config.js 使用如下代码引入插件:
1 | // vue.config.js |
此时运行 yarn serve 会执行 webpack-bundle-analyzer 插件 BundleAnalyzerPlugin 的默认功能
serve 完成,会在浏览器自动生成依赖大小分析的可视化网站,如下图所示
2. 使用 webpack 外部扩展(externals)
防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
使用前打包时间
使用 externals 过滤我们希望通过 cdn 引入的依赖,同样在 vue.config.js 配置:
(注意所需依赖的别名)
1 | // vue.config.js |
而后在项目 index.html 文件内引入对应 cdn
1 | <!-- public/index.html --> |
需要将原来的引用注释,我们的过滤才能生效
1 | // import Vue from "vue" |
再次使用 webpack-bundle-analyzer,可以看到依赖的体积减少了近 10 M
使用后打包时间
再次打包,打包时间缩短了近一倍
未完待续。。。
参考
vue-cli3 使用 webpack-bundle-analyzer 插件;
解决 vue 打包 wendor 过大的问题