What is content-based cache busting and how does it work?

Content-based cache busting includes a fingerprint of the file's content in its URL (filename or query param). The URL changes only when the file changes, allowing infinite cache lifetimes for unchanged files.

// Webpack/Vite output
main.a1b2c3d4.js  // hash changes when source changes
vendor.e5f6a7b8.js

// Cache-Control for hashed files
Cache-Control: public, max-age=31536000, immutable

How the browser update flow works:

1. User's browser has main.a1b2c3d4.js cached for 1 year.
2. You deploy a code change — the new file is main.x9y0z1w2.js.
3. The updated HTML references the new filename — browser fetches it fresh.
4. Old main.a1b2c3d4.js is simply never requested again (it expires naturally).

Key insight: The HTML file itself should have a short/no cache time (or use no-cache) because it's the entry point that references all hashed assets. If the HTML is stale, users get the old filenames.