3. 如何提高生产环境的构建速度？
约 794 字大约 3 分钟
Webpack构建
2025-03-15
优化 Webpack 的构建速度是一个常见的需求，现在主流的思想都是 以存储空间换构建时间，下面是一些常见的优化策略：
1、代码分割 SplitChrunk + 持久化缓存
将布局组件、UI 组件、Eslint、babel-loader、DLL 文件、体积较大的依赖包等不经常变化的代码进行合理的 churnk 分割。
利用文件缓存加速二次打包。WebPack 通过判断文件是否发生变化，来判断是否需要重新编译。
同时需要注意持久化缓存的 Hash （文件指纹）生成策略、颗粒度也会影响构建速度。越复杂的 Hash 值，增量构建的范围也越小，越利于缓存命中，但是会增加构建时间。
2、开启多线程并行构建
可以利用多进程开启并行构建，充分利用多核 CPU 资源，提高构建速度。
但是进程的启动也是有时间开销的，需要根据代码规模酌情考虑。
3、文件排除 Include / Exclude
在 module.rules 中给规则组配置 Include / Exclude 来排除掉不需要编译的目录和文件，限制 loader 的作用范围。
4、使用 oneOf() 精准匹配
oneOf 的作用就是，配置了多个规则组情况下，只要匹配了一个 Rule，就不再继续匹配其他的 Rule。
与之配合的是，我们可以通过调整规则组的匹配规则：
- 调整匹配规则，尽量缩小匹配文件的类型范围
- 尽量将用来处理同一类型文件的 Loader 合并到一个规则组中。
- 控制规则组的数量
5、模块解析 resolve，提高资源匹配速度
- 使用
resolve.alias配置别名，加快模块的查找速度； - 使用
resolve.extensions指定扩展名、指定查找的文件类型； - 使用
resolve.modules指定搜索目录。
6、调整 SourceMap 策略的颗粒度
关闭或者使用低精度的 SourceMap 生成策略，打包速度更快
7、调整文件指纹 hash 的生成策略
Webpack 通过为文件名添加唯一的哈希值（hash），可以确保文件内容发生变化时，文件名也会随之改变，从而强制浏览器重新加载最新的文件，而不是使用缓存中的旧版本。
文件指纹生成策略越精细时：增量构建的变化范围也越小，生成的补丁文件颗粒度也越细，意味着对缓存的影响越小，但同时构建速度也越慢。
8、DLL 技术
在前端构建优化中，DLL（Dynamic Link Library）技术主要用于将不经常变更的第三方依赖预编译为单独文件，进而使用持久化缓存，从而显著提升构建速度。
但是 DLL 文件有些弊端，比如配置复杂、不支持 Tree Shaking。取而代之的解决方案是 WebPack 5 的代码分割和持久化缓存。
9、关闭 devServer
生产环境不需要启用开发服务器
更新日志
e7112-1于