okonet / webpack-long-term-cache-demo

A demo config showing how to enable long-term caching using Webpack. Read [medium link] for details.
MIT License
97 stars 15 forks source link

webpack-long-term-cache-demo

A demo webpack config showing how to enable long-term caching using Webpack. Read Long-term caching of static assets with Webpack for details.

To enable long-term caching of static resources produced by webpack:

  1. Use [chunkhash] to add a content-dependent cache-buster to each file.
  2. Use compiler stats to get the file names when requiring resources in HTML.
  3. Generate the chunk-manifest JSON and inline it into the HTML page before loading resources.
  4. Ensure that the entry point chunk containing the bootstrapping code doesn’t change its hash over time for the same set of dependencies.
  5. Profit!

How to run

  1. npm install
  2. npm start