CI环境下webpack构建的正确缓存键（含缓存失效策略）是什么？

一、核心分层缓存键设计 #

放弃单一维度的缓存键，采用「固定前缀+多维度哈希+回退策略」的组合设计，兼顾缓存命中率和正确性：

• 主缓存键组成：[构建环境标识]-[lock文件哈希]-[构建配置哈希]-[当前commit哈希]
  • 构建环境标识：区分生产/测试等不同构建环境，避免不同环境缓存混用
  • lock文件哈希：计算package-lock.json/yarn.lock/pnpm-lock.yaml的哈希值，依赖变更时自动作废旧缓存
  • 构建配置哈希：计算所有webpack配置文件、babel配置、postcss配置等构建相关配置文件的整体哈希，配置变更时自动触发缓存失效
  • 当前commit哈希：精准匹配当前代码版本的缓存
• 缓存回退策略：如果当前commit对应的缓存未命中，自动回退到匹配[构建环境标识]-[lock文件哈希]-[构建配置哈希]前缀的最新主分支（master/main）缓存，只要依赖和构建配置没有变化，新分支也能复用主分支的全量缓存，仅增量构建改动的代码。

二、Webpack配置配套调整 #

缓存键策略需要和Webpack本身的持久化缓存能力配合才能发挥最大作用，配置项调整如下：

const path = require('path')

module.exports = {
  // 开启文件系统持久化缓存
  cache: {
    type: 'filesystem',
    // 固定缓存目录，方便CI挂载缓存
    cacheDirectory: path.resolve(__dirname, '.webpack_cache'),
    // 配置构建依赖，Webpack会自动监听这些文件的变更，一旦改动自动全量失效缓存
    buildDependencies: {
      config: [
        __filename, // 指向当前webpack配置文件
        path.resolve(__dirname, 'babel.config.js'),
        path.resolve(__dirname, 'postcss.config.js')
        // 其他所有会影响构建结果的配置文件都可以加进来
      ]
    },
    // 可选：根据环境添加额外的版本标识，进一步避免缓存混用
    version: process.env.NODE_ENV
  },
  // 其他配置...
}

Webpack 5本身会自动跟踪每个源码模块的内容、依赖哈希，不需要把全量源码的哈希计算到缓存键里，避免缓存键频繁变动导致命中率下降。

三、CI侧配置注意事项 #

• 缓存挂载路径和上述Webpack配置的cacheDirectory路径保持一致即可，不需要额外缓存其他目录
• 缓存回写规则：主分支构建完成后回写对应前缀的回退缓存，特性分支仅回写当前commit对应的缓存，不要修改主分支的公共缓存，避免污染
• 缓存过期策略：设置7-14天的缓存自动清理规则，删除长期未访问的缓存条目，控制存储成本。

内容的提问来源于stack exchange，提问作者Aron Woost