Caching strategies

Browser caching optimization

Browser cache files based on HTTP headers. Use [contenthash] for application code and vendor libraries to cache unchanged files indefinitely. When code changes, only the changed bundle gets a new hash. This requires runtime chunks separation and careful splitChunks configuration.

Optimize splitChunks

Configure chunks to separate vendor dependencies.

module.exports = {
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    }
  }
};

Output:

Generates: main.HASH.js, vendors.HASH.js, runtime.HASH.js

Vendor cache never expires

npm packages rarely change. Separating vendor code lets browsers cache it for months. Your application code updates frequently, getting fresh bundles. This two-tier caching strategy significantly improves repeat-visit performance.

Quick check

Quick check: Why separate vendor code?

• Vendors change rarely, can be cached longer.
• Vendor code must be in a separate file.
• It makes bundles smaller in size.