要把 Webpack 的文件系统缓存真正用起来，核心配置少不了这几项：先把 cache.type 设为 'filesystem'，再明确指定 cacheDirectory；同时配好 buildDependencies 和 snapshot 的哈希比对机制。除此之外，像 babel-loader 这类 loader 也最好单独开启缓存，这样才能尽量避免因为动态值变化，导致缓存频繁失效。

直接在 webpack.config.js 中启用文件系统缓存，并配合 loader 缓存与快照机制，就能显著加速二次构建。重点不只是“开启缓存”，而是让缓存稳定复用，避免意外失效。

启用 Webpack 文件系统级持久化缓存

Webpack 5 默认不开启持久化缓存，必须显式配置。它会把模块编译结果、依赖图、代码生成物等写入磁盘。

下次构建时可直接读取这些内容，从而跳过重复解析和编译。

• 设置 cache.type = 'filesystem'，这是最核心的一步
• 指定 cache.cacheDirectory，如 ./node_modules/.cache/webpack，方便定位、清理和 CI 环境复用
• 通过 buildDependencies 告诉 Webpack 哪些文件变更会令缓存失效，例如：
  config: [__filename, './tsconfig.json', './babel.config.js']

为常用 loader 启用独立缓存

Webpack 缓存负责模块粒度，loader 缓存负责单文件转换过程。两者叠加，才能更完整地覆盖构建链路。

• babel-loader 加 cacheDirectory: true，自动缓存转译结果
• 建议同时设 cacheCompression: false，提升开发时读取速度
• esbuild-loader 或 swc-loader 通常自带高效缓存，确认其文档是否需额外开启
• 避免在 loader 配置中使用动态值，如函数返回路径、Date.now()，否则缓存键不稳定

配置快照（snapshot）避免时间戳误失效

默认情况下，Webpack 依赖文件修改时间判断是否需要重新读取。但编辑器保存、git checkout、CI 拉取，都可能更新时间戳却不改内容。

这会导致缓存被错误丢弃。

• 启用内容哈希比对：
  snapshot: { resolve: { hash: true }, module: { hash: true } }
• 这样 Webpack 会基于文件真实内容生成哈希，而不是 mtime
• 这样能大幅提升缓存命中率
• 尤其对 node_modules 下的依赖文件效果明显

注意缓存失效的常见触发点

缓存不是“一劳永逸”。以下操作会让 Webpack 主动清空或跳过缓存：

• 升级或更换任何 loader/plugin，比如从 ts-loader@9 换成 @swc/webpack-plugin
• 修改 Webpack 配置对象中的任意字段，包括 mode、devtool、resolve.alias、optimization.splitChunks
• 改动 buildDependencies 列出的文件，如 tsconfig.json 中调整 target 或 lib
• 命令行参数不同，webpack --env production 和 --env development 会被视为两个独立缓存上下文

《夸克》非常好用的免费AI浏览器

下载APP查看