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）是构建末期耗时操作，开启其缓存能明显缩短生产构建时间：
立即学习“Java免费学习笔记（深入）”；
- 在
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 后应逐步移除
