Webpack配合TypeScript提升二次构建速度的核心是启用持久化缓存+增量编译+类型检查分离三重机制：Webpack 5文件系统缓存复用中间结果，tsconfig开启incremental仅编译变更文件，fork-ts-checker-webpack-plugin将类型检查移至独立进程。
Webpack 配合 TypeScript 提升二次构建速度，核心是启用**持久化缓存 + 增量编译 + 类型检查分离**三重机制。单纯开 cache 不够，必须让 TypeScript 编译、类型校验、模块打包各司其职，避免重复计算。
1. Webpack 5+ 文件系统缓存（必配）
这是提速最直接的一环，把模块解析、AST 生成、代码生成等中间结果写入磁盘，下次构建直接复用：
- 在 webpack.config.js 中配置
cache: { type: 'filesystem' }，并指定缓存目录和依赖追踪 - 务必设置
buildDependencies.config，否则修改 webpack 配置后缓存不会自动失效 - 推荐完整写法：
cache: {
type: 'filesystem',
cacheDirectory: path.resolve(__dirname, '.webpack_cache'),
buildDependencies: {
config: [__filename]
}
}
实测效果：某中大型项目二次构建从 22 秒降至 3.5 秒，降幅超 80%。
2. TypeScript 启用增量编译（tsconfig.json）
让 tsc 只处理变更文件及其依赖，不全量重编：
- 在 tsconfig.json 的
compilerOptions中开启"incremental": true - 指定
"tsBuildInfoFile"存放增量元数据（如"./.tsbuildinfo"） - 确保
"noEmit": false或由 ts-loader 控制输出（若用 fork-ts-checker-webpack-plugin，则可设为 true）
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": "./.tsbuildinfo",
"noEmit": false
}
3. 分离类型检查（关键提速点）
类型检查耗时高且不参与打包产物生成，必须移出主线程：
- 安装插件：
npm install --save-dev fork-ts-checker-webpack-plugin - 在 Webpack plugins 中添加，它会在独立进程执行类型校验，不影响打包流程
- 配合
noEmit: true使用更高效（此时只做检查，不产出 JS）
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// ...
plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: { memoryLimit: 4096 }
})
]
4. 避免缓存冲突的实用建议
缓存不是开了就稳，几个易踩坑点需注意：
- 不要同时启用
HardSourceWebpackPlugin和 Webpack 5 原生cache.type: 'filesystem'，二者原理重叠，可能互相干扰 - 若使用
ts-loader，建议关闭其内部的transpileOnly: true模式（除非已配 fork 插件），否则会跳过类型检查但失去增量能力 - 确保
node_modules不在缓存污染路径中；.webpack_cache 目录应加入 .gitignore
