Caching strategies

Browser caching optimization

Browser HTTP headers के आधार पर files को cache करता है। Application code के लिए [contenthash] use करें। जब code बदलता है, केवल changed bundle को नया hash मिलता है।

SplitChunks को optimize करें

Vendor dependencies को separate करने के लिए chunks को configure करें।

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 कभी expire नहीं होता

npm packages rarely बदलते हैं। Vendor code को separate करने से browsers इसे months तक cache कर सकते हैं। आपके application code को बार-बार updates मिलते हैं।

त्वरित जाँच

त्वरित जाँच: Vendor code को अलग क्यों करें?

• Vendors rarely बदलते हैं, longer cache हो सकता है।
• Vendor code को separate file में होना जरूरी है।
• यह bundles को size में छोटा बनाता है।