webpack 5 推荐启用内置文件系统缓存(cache: { type: "filesystem" })、babel-loader 磁盘缓存(cachedirectory: true)及 terserplugin 缓存(cache: true, parallel: true),禁用 cache-loader 等过时插件。

Webpack 配置缓存是提升二次构建速度最直接有效的方式,尤其在 Webpack 5+ 中,内置的文件系统缓存已足够强大,无需额外插件即可实现显著提速。
启用 Webpack 内置文件系统缓存
Webpack 5 默认支持 cache 选项,设为 "filesystem" 即可将模块编译结果持久化到磁盘,后续构建自动复用。这是目前推荐的首选方案:
- 配置简单:只需在
webpack.config.js中添加cache: { type: "filesystem" } - 自动管理:缓存目录默认为
node_modules/.cache/webpack,支持增量更新和依赖追踪 - 智能失效:通过
buildDependencies声明配置文件依赖,如config: [__filename],确保配置变更时自动清缓存
为 babel-loader 单独开启磁盘缓存
即使启用了 Webpack 全局缓存,仍建议显式启用 babel-loader 的 cacheDirectory,进一步加速 JS 转译环节:
- 在
use项中为babel-loader设置options.cacheDirectory: true - 默认缓存路径为
node_modules/.cache/babel-loader,也可自定义(如指向项目根目录下的.cache/babel) - 注意:需配合
include(如path.resolve(__dirname, "src"))使用,避免对node_modules或测试文件做无意义缓存
压缩阶段启用 terser 缓存
JS 压缩(Terser)是构建末期耗时操作,开启其缓存能明显缩短生产构建时间:
- 在
optimization.minimizer中配置TerserPlugin,启用cache: true和parallel: true -
parallel利用多核 CPU 并行压缩,cache复用未变动代码的压缩结果 - 典型写法:
new TerserPlugin({ cache: true, parallel: true })
避免过时方案,优先用原生能力
Webpack 5 已原生支持上述缓存能力,不建议再引入 cache-loader 或 hard-source-webpack-plugin 等第三方方案:
-
cache-loader已被官方标记为废弃,功能完全由 Webpack 自身缓存替代 -
hard-source-webpack-plugin在 Webpack 5 下可能与原生缓存冲突,且维护停滞 - 若项目仍在用 Webpack 4,可作为过渡方案;升级到 Webpack 5 后应逐步移除
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











