How Cache Busting Works

Cache busting is a technique so that browsers can have long caches on files while having them reload files when they change. Before you can understand that, you have to understand how caching works with websites.

Caching Your Website

When you want browsers to cache files so that users don’t have to reload them every time they visit your website, you use HTTP caching. HTTP caching allows you to specify how long a cache should be held for a file name, so that loading the page is pretty fast. Now let’s look into the problem.

The Problem with Caching

Imagine you have a website with 3 files, 

index.html

, 

index.js

, and 

index.css

 and you set the cache lifetime to 1 year so that the website loads pretty fast. Now you change the 

index.css

 to have a different color scheme across your app. Your old users wouldn’t notice because they would have to wait a year for the cache to refresh.

That becomes a problem, especially when deploying bug fixes and security patches. People typically use cache busting to solve this, where they use various ways to change the names of the files that are loading for every version so that browsers will load them and add them to their cache.

Cache Busting

There are a couple different ways of changing the names of files so that they will load when they change. One way is to use version numbers and have them somewhere in the file name when loading. You could have a subdirectory for every version, 

v1/index.js

 

v2/index.css

. You could also have the version in queries in the URLs, 

index.js?v1

, 

index.css?v2

.

Another way is to change the name of the file,

index.v1.js

,

index.v2.css

. These ways are not as manageable because this can become very hard once you have a ton of files that are being changed.

A more popular and manageable way is to keep hashes inside the file names. Hashes, if you don’t know, are fixed length character representations of any content and they are irreversible, meaning you can get the hash from the file but you can’t get the file from the hash. Hashes are perfect for this, because when a file changes its hash will change, so if we keep the hash inside the filename 

index.[someHashHere].js 

browsers will detect it and load it instead of an old file.

This is even better because it is super easy to fit this into your workflow with the bundler you use to do other optimizations on assets.

Conclusion

In this post I talked about the problem with having long caches without cache busting and different ways to cache bust your app.

📚 Further reading:

• HTTP Caching on MDN
• Hashing Files with Webpack

If you liked this article I suggest you check out other articles of mine at my blog.

Originally published on JavaScript in Plain English.