迁移至官方react-scripts：Webpack持久化缓存及失效机制疑问

在react-scripts官方支持Webpack 5之前，我使用webpack-5-react-scripts，目前正迁移至官方版本，迁移过程中遇到缓存相关问题。Webpack 5引入了持久化缓存特性，可实现快速重建，但默认禁用，配置得当即可启用。

此前我通过以下配置（大概率覆盖了react-scripts的缓存配置）设置缓存及缓存失效：

if (options.caching && options.caching.enabled) {
    config.cache = {
      type: 'filesystem',
      version: process.env.GIT_REV,
      buildDependencies: {
        config: options.caching.buildDependencies,
      },
    };

    const snapshotSettings = process.env.CI ? { hash: true } : { timestamp: true };

    config.snapshot = {
      immutablePaths: [],
      buildDependencies: snapshotSettings,
      module: snapshotSettings,
      resolve: snapshotSettings,
      resolveBuildDependencies: snapshotSettings,
    };
  }

该配置会根据构建/本地环境，将快照设置为基于内容哈希或时间戳。我查看了react-scripts的Webpack配置，发现其仅配置了缓存相关参数，未配置任何快照设置。在此情况下，react-scripts是如何实现缓存失效的？另外，我对react-scripts中cache+snapshot设置的理解是否正确？

1. react-scripts的缓存失效机制 #

react-scripts的Webpack缓存配置通过两个核心参数实现缓存失效：

• version：默认基于项目package.json的version字段或process.env.REACT_APP_VERSION，当项目版本变更时，缓存会整体失效，触发全量重建。
• buildDependencies：配置了对react-scripts内部配置文件、项目package.json、yarn.lock/package-lock.json等依赖文件的监控，一旦这些文件内容变化，Webpack会认为构建依赖发生变更，直接失效对应缓存。

此外，Webpack 5的snapshot有默认配置，即使react-scripts未显式设置，也会自动完成缓存失效逻辑：

• 默认对模块文件使用内容哈希判断是否变更，避免文件修改时间误判导致的缓存异常；
• 自动监控resolve过程的依赖（如node_modules中的包），一旦其版本或内容更新，就会触发对应缓存失效。

2. 关于cache+snapshot设置的理解 #

你的理解是正确的：react-scripts确实仅显式配置了cache的核心参数，没有自定义snapshot设置。这是因为Webpack 5的默认snapshot策略已经覆盖了绝大多数日常开发场景的缓存失效需求，官方选择依赖默认行为来保持配置简洁，避免过度自定义带来的兼容性问题。

而你之前的自定义配置，是主动覆盖了snapshot的默认逻辑，根据CI/本地环境切换哈希/时间戳的判断方式，属于更精细化的缓存控制，在特定场景（比如CI环境需要严格的内容一致性）下是合理的，但官方配置更偏向通用场景的开箱即用。

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