使用虚拟node_modules 对webapck前端CI重构-150%的速度提升

一、起源

在Webpack5问世2个月之后，对于其重要更新特性长效缓存机制，吸引了多少开发者的眼球。Webpack5官网宣称，复用长效缓存，可以使二次构建效率提升10倍以上，这使我立马想到了我们当前MR构建流程的痛点。分析当前构建流程，发现咱们的前端工程构建分为如下几步：

• 1、安装jssdk仓库的依赖
• 2、生成jssdk dll 库
• 3、使用生成的dll 库 编译jssdk 生成jssdk中间产物app.boundle.js
• 4、安装reactjs依赖
• 5、使用app.boundle.js 编译构建最终页面

每一步消耗的时间大概是这样：

序号	流程	耗时
1	安装jssdk仓库的依赖	90
2	生成jssdk dll 库	40
3	使用生成的dll 库 编译jssdk 生成jssdk中间产物app.boundle.js	60
4	安装reactjs依赖	95
5	使用app.boundle.js 编译构建最终页面	610
6	合计	895

可见整个构建时长约为 15分钟左右。

在之前的优化中，主要是针对第五步，也就是webpack编译的流程，也是耗时最长的一步进行了构建优化，例如 采用babel-loader 以及terser-plugin等提供cache方案的缓存机制，采用去除eslint生产环境构建等，或者针对第一和第四步，使用固化package-lock.json 和 npm ci 的方式，减少安装依赖的速度。做到以下平均构建速度。

序号	流程	耗时
1	安装jssdk仓库的依赖	60
2	生成jssdk dll 库	40
3	使用生成的dll 库 编译jssdk 生成jssdk中间产物app.boundle.js	60
4	安装reactjs依赖	70
5	使用app.boundle.js 编译构建最终页面	380
6	合计	610
可见，在上一轮的优化中，总体平均MR流程约为10分钟左右。

但是这就结束了吗？

没有。

这些优化没有从根本上解决问题。如果经过仔细分析，还会发现如下问题：

• 1、项目依赖大部分时间保持不变，不必每次依赖构建都重新进行构建，第一步和第四步可以省略
• 2、jssdk dll库的编译，多余了。只要dll依赖不变，不必每次编译dll，第二步也可以省略
• 3、reactjs 没有抽离复用dll ，构建时长还是可以优化（第五步）
• 4、核心的webpack构建没有使用长效缓存（第五步）

针对以上四个痛点 ，在仔细思考之后，做出以下解决方案：

• 1、针对MR构建流程中，工作目录平级的特点，采用虚拟连接技术，复用上层特定的依赖
• 2、对于dll库的生成，做好dll缓存，每次构建直接复用缓存的dll
• 3、对React.js采用webpackDllPlugin 和 DllReferencePlugin 生成dll复用对
• 4、升级Webpack5 复用长效缓存

由于现有的构建流程是通过maven分离控制编译，调用项目package.json中声明的特定脚本，在对shell脚本不熟悉的情况下，采用node.js重写构建流程。

二、构建流程