performance.buildCache#

• Type:

type BuildCacheConfig =
  | {
      /**
       * Base directory for the filesystem cache.
       */
      cacheDirectory?: string;
      /**
       * Set different cache names based on cacheDigest content.
       */
      cacheDigest?: Array<string | undefined>;
    }
  | boolean;

• Default:

const defaultBuildCacheConfig = {
  cacheDirectory: './node_modules/.cache/webpack',
};

• Bundler: only support webpack

Controls the caching behavior during the build process.

Modern.js will enable build cache by default to improve the compile speed, the generated cache files are write to the ./node_modules/.cache/webpack directory by default.

You can configure the cache path with buildCache, e.g.

export default {
  performance: {
    buildCache: {
      cacheDirectory: './node_modules/.custom_cache/webpack',
    },
  },
};

You can also disable the build cache by setting it to false:

export default {
  performance: {
    buildCache: false,
  },
};

cacheDigest#

cacheDigest is used to add some environment variables that will affect the build results. Modern.js will set the cache name based on the cacheDigest content and the current build mode to ensure that different cacheDigests can hit different caches.

Example#

The current project needs to set different extensions according to different APP_ID. By default, since the code & configuration & dependencies of the current project have not changed, the previous cache will be hit.

By adding APP_ID to cacheDigest, different cache results will be searched when APP_ID changes, thereby avoiding hitting cache results that do not meet expectations.

export default {
  tools: {
    bundlerChain: (chain: any) => {
      if (process.env.APP_ID === 'xxx') {
        chain.resolve.extensions.prepend('.ttp.ts');
      }
    },
  },
  performance: {
    buildCache: {
      cacheDigest: [process.env.APP_ID],
    },
  },
};