启用cacheDirectory: true可显著提升构建速度，尤其二次构建快40%以上；它将转译结果缓存至node_modules/.cache/babel-loader，避免重复转译未改动文件。
直接在 babel-loader 的 options 中加 cacheDirectory: true 就行。这是最简单也最有效的提速方式，尤其对中大型项目效果明显——第二次构建通常能快 40% 以上。
为什么缓存有用
Babel 转译 JS 是构建里最耗时的环节之一。你改一个文件，其他 99% 的模块其实根本不用重编译。缓存就是把已转译过的模块结果存到磁盘（默认在 node_modules/.cache/babel-loader），下次直接复用，跳过重复劳动。
基础配置写法
在 Webpack 的 loader 配置里加上这一项即可：
-
test: /\.js$/匹配 JS 文件 -
exclude: /node_modules/排除第三方库，避免无意义转译 loader: 'babel-loader'-
options: { cacheDirectory: true }—— 关键就这句
完整示例：
立即学习“Java免费学习笔记（深入）”；
module.exports = {module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { cacheDirectory: true }
}
}]
}
};
配合其他缓存更进一步
单靠 Babel 缓存已经很有效，但搭配下面几项，二次构建还能再快一截：
- Webpack 5 自带的持久化缓存：
cache: { type: 'filesystem' }，缓存整个模块图，提速可达 70%+ - Terser 压缩开启缓存：
optimization.minimizer里配置cache: true - 硬缓存插件：
hard-source-webpack-plugin，适合模块数超千的项目，冷启动也能大幅缩短
注意点
缓存不是万能的，有些情况它会自动失效：
- Babel 配置变了（比如 presets 或 plugins 更新）
- 源码内容有修改
- Node.js 版本或依赖版本升级
- 缓存目录被手动清空或损坏
这些时候缓存会重建，第一次构建稍慢，之后又回到高速状态。
