[SOLVED] How react-scripts v5 handles the persistent caching generated by webpack?

How react-scripts v5 handles the persistent caching generated by webpack?

I was using webpack-5-react-scripts before react-scripts officially supported webpack 5 and now migrating to offical react-scripts. While migration I got a question related to caching.

The webpack 5 introduced lots of new features and one of them was persistent caching . The persistent caching allows fast rebuilds but it is disable by default because of reasons mentioned in the doc. But we can configure it if we set it up correctly.

Previously I was using following cache and cache invalidation configuration (overriding the cache configuration of react-scripts most probably):

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,
    };
  }

This was using the cache but also setting snapshot settings to content or timestamp based, based on build/local environment.

I went through the webpack configuration of react-scripts and found that we are only using cache configuration but don't have any snapshot settings.

In this case, how react do the cache invalidation ? Also, 🙈 am I understanding the settings of cache + snapshot correctly in terms of react-scripts?

Solution