HTTP caching pattern: Cache bust static files
29 May 2023 (Updated 29 May 2023)
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