Caching and PerformanceLesson 4.3

Cache busting: how to force browsers to load new files

content-based hashing, cache-busting fingerprinting, immutable directive, versioned filenames, CDN purge, URL-based versioning

Cache Busting

For static assets (JS, CSS, images), the best caching strategy is: cache forever, bust by changing the URL. This is cache busting with content hashing.

The strategy

Generate a hash of the file's content and embed it in the filename. When the file changes, the hash changes, the URL changes, and the browser fetches the new version — there is no cache to invalidate.

# Without cache busting (broken)
style.css  → Cache-Control: max-age=86400
# User gets stale CSS for up to 24h after deploy

# With content-hash cache busting
style.a3f8c2d1.css → Cache-Control: max-age=31536000, immutable
# Cached forever — URL changes on every content change

The immutable directive tells the browser: never revalidate this URL, not even when the user force-refreshes. Browsers normally revalidate on hard refresh — immutable prevents that wasted round-trip.

Build tool support

Webpack, Vite, Rollup, and Parcel all support content hashing via [contenthash] or similar tokens in output filenames. The HTML references the hashed filenames, which must be updated on each build — tools handle this automatically.

CDN purge

For non-versioned URLs (like /api/config.json), you must explicitly purge the CDN cache after deployment using the CDN provider's API. Cache busting avoids this step for static assets entirely.