# Caching strategies — Webpack

Source: https://www.geekswithgeeks.com/hi/webpack/webpack-17

> Smart versioning के साथ cache effectiveness को maximize करें।

## Browser caching optimization

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

## SplitChunks को optimize करें

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

```javascript
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 मिलते हैं।

त्वरित जाँच

**Quiz:** Vendor code को अलग क्यों करें?

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

*Answer:* Vendors rarely बदलते हैं, longer cache हो सकता है।. Vendor code infrequently बदलता है, तो separating करने से browsers इसे cache कर सकते हैं जबकि application code बार-बार update होता है।