启用babel-loader的cachedirectory:true可显著提升二次构建速度，它将转译结果缓存至node_modules/.cache/babel-loader（或自定义路径），配合exclude:/node_modules/和include指定src目录确保高效复用，同时建议关闭cachecompression:false并搭配webpack 5持久化缓存使用。
在 Webpack 中开启 Babel 缓存，核心就是让 babel-loader 把转译结果写入磁盘并复用，避免每次构建都重复处理未改动的 JS 文件。这能明显提升二次构建速度，尤其在中大型项目中效果显著。
启用 babel-loader 的 cacheDirectory
这是最直接有效的配置方式。只需在 babel-loader 的 options 中设置 cacheDirectory: true，Babel 就会自动在项目根目录下生成 .cache/babel-loader（或类似路径）缓存编译产物。
- Webpack 会根据源文件内容、Babel 配置、依赖版本等生成唯一缓存键，确保缓存安全
- 默认缓存路径是
node_modules/.cache/babel-loader，也可自定义，例如：cacheDirectory: './.cache/babel' - 建议同时关闭缓存压缩（节省 CPU）：
cacheCompression: false
配合合理的文件范围控制
缓存生效的前提是 Babel 只处理真正需要转译的代码，避免把 node_modules 里已编译好的第三方库也纳入缓存流程。
- 务必配置
exclude: /node_modules/—— 这不是可选项，而是必须项 - 更推荐显式指定处理范围，比如
include: path.resolve(__dirname, 'src')，提高确定性和性能 - 注意：若使用
babel.config.json（推荐），它的作用域是整个项目；而.babelrc只对同级及子目录生效，容易出错
搭配其他缓存机制效果更佳
Babel 缓存解决的是“转译慢”，但构建瓶颈还可能来自 ESLint 检查、CSS 处理或模块解析。可同步优化：
- ESLint 插件开启缓存：
new ESLintPlugin({ cache: true, cacheLocation: './node_modules/.cache/eslint' }) - Webpack 自身持久化缓存（Webpack 5+）：
cache: { type: 'filesystem' }，它会缓存模块图、解析结果等更高层信息 - 确保
babel-loader和@babel/core版本匹配，避免因缓存格式不兼容导致缓存失效
验证缓存是否生效
启动首次构建后，检查项目目录是否生成了 .cache 文件夹；第二次构建时观察终端输出，若看到类似 cached modules 或耗时明显下降（尤其是 unchanged modules 被跳过），说明缓存已起作用。
注意：修改 Babel 配置、升级相关依赖、或清空 .cache 目录都会使缓存失效，这是预期行为。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
