记一次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 文件的选项。
javascript">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中加入了一下选项：
javascript">{parallel: true, // 多核处理，按理说默认应该生效，但我的文件被设置成了falseruntimeCompiler: false, // 当然这是默认值，但我的文件被设置成了trueproductionSourceMap: false // 不需要生产环境的 source map
}
结果
最终打包时间降到了12min左右，初见成效。
下一步时间足够的话，当然优先考虑迁移到vite，同时，减少生成的文件体积也是一个重要的优化项。
– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。
