Webpack缓存机制通过持久化模块编译结果显著提升二次构建速度，Webpack 5推荐启用filesystem缓存、babel-loader磁盘缓存及terser-webpack-plugin压缩缓存，并可通过--stats-cached等手段验证生效。
Webpack 的 cache 机制是提升二次打包速度最直接有效的手段，核心思路是把已编译的模块结果持久化保存，下次构建时跳过重复工作。只要配置得当，二次构建耗时可降低 60%–80%，中大型项目从几十秒缩至几秒很常见。
Webpack 5+：启用文件系统缓存
Webpack 5 内置了强大的 cache 配置，推荐使用 type: 'filesystem'（硬盘缓存），比内存缓存更稳定、复用率更高。
- 在
webpack.config.js中添加如下配置：
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename] // 配置文件变更时自动清空缓存
}
}
};
- 首次构建会生成缓存目录（默认
node_modules/.cache/webpack），后续构建直接读取； - 缓存会自动感知
package.json、babel.config.js等依赖变化，无需手动清理； - 搭配
resolve.alias或resolve.symlinks: false可避免因软链接导致缓存失效。
babel-loader 单独开启缓存
即使 Webpack 缓存已启用，babel-loader 仍可叠加一层磁盘缓存，进一步加速 JS 转译环节。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在
rules中为babel-loader添加cacheDirectory: true：
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: { cacheDirectory: true }
}]
}
- 它会把每个文件的 Babel 编译结果存到本地临时目录（如
node_modules/.cache/babel）； - 特别适合含大量 ES6+ 语法或 TypeScript 的项目，转译耗时通常占构建大头；
- 注意：不要和
cache-loader（Webpack 4 时代方案）混用，Webpack 5 中已不推荐。
terser-webpack-plugin 压缩阶段也缓存
生产环境压缩 JS 是耗时操作，terser-webpack-plugin 支持缓存，避免每次重新压缩相同代码。
立即学习“Java免费学习笔记（深入）”；
- 在
optimization.minimizer中启用：
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true // 同时多线程压缩
})
]
}
};
- 缓存路径默认为
node_modules/.cache/terser-webpack-plugin； - 配合
parallel: true可进一步提速，尤其适用于多核 CPU； - 注意：仅在
mode: 'production'下生效，开发模式无需开启压缩缓存。
验证缓存是否生效
光配对还不算完，得确认它真正在工作。
- 启动构建时加
--stats-cached参数，终端会显示缓存命中详情； - 观察构建日志里是否有
cached modules、using cache类提示； - 检查
node_modules/.cache目录下是否有对应子文件夹生成； - 用
speed-measure-webpack-plugin对比开启前后的各阶段耗时，重点关注babel-loader和TerserPlugin时间下降幅度。
