# Caching strategies — Webpack

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

> Maximize cache effectiveness with smart versioning.

## 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.

```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 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

**Quiz:** Why separate vendor code?

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

*Answer:* Vendors change rarely, can be cached longer.. Vendor code changes infrequently, so separating it allows browsers to cache it indefinitely while application code updates frequently.