HTTP caching pattern: Cache bust static files

In a nutshell

Most bundlers like Webpack support adding hashes to generated bundles. When you deploy a new JavaScript or CSS file, the generated filename will change so browsers won’t serve old cached files:

# Version in filename
bundle.v1.js
bundle.v2.js

# Version in query
bundle.js?timestamp=<timestamp>

# Hash in filename
bundle.jsdfkjsdkjfksdj.js

# Hash in query
bundle.js?v=3983849389

Or if you’re serving static files from PHP or some other server-side templating language, you can do something like:

<html>
  <body>
    <p>Blah blah blah</p>
    <script src="main.js?version=<?= time(); ?>" />
  </body>
</html>

Tagged: HTTP caching

In a nutshell

Leave a comment Cancel reply