webpack 5 持久化缓存需手动启用并配合 typescript 增量编译，配置 type: 'filesystem'、cachedirectory 和 builddependencies，启用 "incremental": true 等 ts 选项后冷启动时间可降 60% 以上。
Webpack 5 的持久化缓存能显著降低 TypeScript 项目的冷启动时间，但需手动启用并注意失效边界。默认不开启，是因为它在极少数场景下可能引入构建不一致问题（比如 loader 升级、配置变更或命令行参数变化时），所以必须显式配置并理解其行为。
启用 Webpack 5 持久化缓存
在 webpack.config.js 中添加 cache 配置即可启用文件系统级缓存：
- 设置
type: 'filesystem'，启用磁盘缓存（比内存缓存更持久） - 指定
cacheDirectory明确缓存路径，便于清理和调试（如./node_modules/.cache/webpack） - 可选配置
buildDependencies，让 Webpack 监控配置文件本身变化（如tsconfig.json、webpack.config.js），避免因配置更新导致缓存误用
示例配置片段：
cache: {
type: 'filesystem',
cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),
buildDependencies: {
config: [__filename, './tsconfig.json']
}
}
配合 TypeScript 增量编译（关键协同点）
仅开 Webpack 缓存不够，TypeScript 层也要启用增量构建，否则每次仍会全量解析 .ts 文件。需在 tsconfig.json 中设置：
-
"incremental": true—— 启用增量编译 -
"composite": true—— 支持项目引用（适合多包结构） -
"tsBuildInfoFile"指定构建信息存储位置（如"./dist/tsbuildinfo"），确保信息可复用
这两层缓存（Webpack 文件系统缓存 + TS 增量编译信息）叠加后，大型项目冷启动时间可下降 60% 以上。
规避缓存失效陷阱
以下操作会触发 Webpack 清空或跳过缓存，需特别注意：
- 升级或修改任何 loader / plugin（如更新
ts-loader版本） - 更改 Webpack 配置对象中的任意字段（包括
mode、devtool、resolve.alias等） - 修改被
buildDependencies列出的文件（如tsconfig.json中改了target） - 使用不同 CLI 参数运行构建（如
webpack --env productionvs--env development）
建议：将构建脚本固化（如用 npm script 封装），避免临时加参数；对配置做最小化变更，必要时主动清空 cacheDirectory 目录。
开发阶段额外提速：热更新（HMR）与缓存联动
在开发服务器中启用 HMR 可减少全量重构建。配合缓存后，模块更新只影响变更部分：
- 确保
devServer.hot = true - 使用
ts-loader时开启transpileOnly: false（保留类型检查）或搭配ForkTsCheckerWebpackPlugin异步校验，避免阻塞缓存流程 - 避免在
module.rules中对 .ts 文件使用cache-loader（Webpack 5 内置缓存已覆盖该功能，重复配置反而干扰）
