Lazy Loading & Code Splitting

How can you optimize the caching strategy for lazy-loaded modules?

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

Disable caching completely
Cache all modules together
Use content hashing and proper cache groups
Using content hashing and proper cache groups is the optimal caching strategy because: 1) Content hashing ensures cache busting only when content changes, 2) Separate cache groups for vendor and application code optimize cache hit rates, 3) Deterministic module IDs prevent unnecessary cache invalidation, 4) Runtime chunk separation improves caching efficiency. The configuration shown implements these best practices by using content hashes in filenames, separating vendor chunks, and optimizing for long-term caching while ensuring proper cache invalidation when needed.
Reload all modules on each visit

Next Question (18/20)