记一次vue-cli老项目的打包时长优化
背景
这是一个基于 vue-cli
的 vue2
的老项目,比较久远,一般Jenkins
中打包时间都在 5-6min
左右,基本能够接受。
近来由于项目原因,在该项目中加入了一些在打包时动态生成的js文件以做“缓存”。
症状
于是打包时间开始暴涨,从刚开始生成的文件不多,打包时间暴涨到30min
,然后生成的文件越来越多,打包时间竟然达到40min
,这显然是不可接受的。
接下来是我的排查过程:
排查
首先排除了使用vite
的可能性,迁移的成本太高,时间太短,长期解决方案可以考虑直接迁移到vite
。
首先找到具体卡住的时间
既然是从加入生成的js文件开始暴涨的打包时间,那么问题肯定优先出现在这里。
果然,我从 Jenkins
的打包日志中找到了证据。
有大量的类似警告如下:
1d41727678004.js as it exceeds the max of 500KB.
说明生成的js文件过大。
同时我还发现了在构建产物中有 .map
文件,这也是一个优化的方向。
既然文件过大,当然首选解决方案肯定是减小文件体积,但是这个文件是由打包时脚本生成,不便操作,遂放弃。
其次排查构建配置
首先打开 vue.config.js
文件,加上排除 .map
文件的选项。
productionSourceMap: false
进入 vue.config.js
的官网说明:https://cli.vuejs.org/zh/config/
我找到了如下三个相关选项:
productionSourceMap
Type: boolean
Default: true
如果你不需要生产环境的 source map
,可以将其设置为 false
以加速生产环境构建。
runtimeCompiler
Type: boolean
Default: false
是否使用包含运行时编译器的 Vue
构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
parallel
Type: boolean
Default: require('os').cpus().length > 1
是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
最终修改
最终我在vue.config.js中加入了一下选项:
{
parallel: true, // 多核处理,按理说默认应该生效,但我的文件被设置成了false
runtimeCompiler: false, // 当然这是默认值,但我的文件被设置成了true
productionSourceMap: false // 不需要生产环境的 source map
}
结果
最终打包时间降到了12min
左右,初见成效。
下一步时间足够的话,当然优先考虑迁移到vite
,同时,减少生成的文件体积也是一个重要的优化项。
– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。