What does cache busting aim to achieve, and how can it be done?

In order to avoid having to download files again when navigating between pages or refreshing the same page, browsers include a cache that temporarily stores them on websites. In order to instruct the browser to keep the file for a specific period of time, the server is configured to send headers. This preserves bandwidth while significantly speeding up websites.

The user's cache still refers to outdated files, which might lead to issues when website developers make changes to the site. If the cached CSS and JavaScript files are referring items that no longer exist, have relocated, or have been renamed, it could either leave them with outdated functionality or break a website.

The act of pushing the browser to download new files is known as cache busting. To accomplish this, give the new file a name distinct from the one on the old file.

Adding a query string at the end of the file is a typical way to make the browser download the file again.

src="js/script.js" => src="js/script.js?v=2"

Although the browser views it as a different file, it does not require changing the file name.

Thanks for reading...

Happy Coding!