Caching strategies

Browser caching optimization

Browsers HTTP headers के आधार पर files को cache करते हैं। Application code और vendor libraries के लिए [contenthash] use करें ताकि unchanged files को लंबे समय तक cache किया जा सके। जब code बदलता है, केवल changed bundle को नया hash मिलता है। इसके लिए अलग runtime chunk और सावधानी से की गई splitChunks configuration जरूरी है।

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 को अलग क्यों करें?

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