Many us might have faced issue with cached static content - cache buster, Every deployment whenever there is change in static files it becomes a painful job to ask your end customer to clear the cache. In order to get rid of this problem, here are few ideas for cache buster.
Append version number in front of changed files references ( /path/file.js?v=1.1) Reduce cache expiry header Use grunt scripts to handle cache issue.
Issue with cached static content - cache buster
. Let’s dive into details.
1. Appending version number approach
This is the easiest approach to resolve the static content cache issue, But required extra efforts each time you change file. Let’s say I have project, something shown as below. In case you have some changes in 1.js, then the references for 1.js has to be update in each files where it is used with ‘/1.js?v=<new version>’, in this both the JSPs. Pros:
- Very easy to implement.
- Doesn’t requires much planning.
- Requires updating many file depending on how many places static files is reference.
- Chances of manual errors.
2. Reduce cache expiry
Cache expiry headers tells browser when to fetch new version of the file. Setting this value to 24hrs will fetch new files everyday but since browser will call this file everyday it will increase your page load time also will put some extra load on your servers. This parameter can be configured on both web and app servers. Pros:
- Easy to configure.
- Increase the page load time.
- Increase the server load.
3. Use grunt (task runner) while deployment.
It is bit complex and depending how complex is your project structure it can take time to implement. It requires deployment script changes as well. Pros:
Unlike first one it doesn’t require any changes to other files on each deployment Can be used to minify and compress files as well
- One time setup requires some time and depending on how complex is you project structuring it might require lot of changes.
Grunt is a task runner. The idea is to segregate all the CSS and JS files and put them up in single location. On each deployment, the script will minfy and compresses the file present at that location. Then the file is renamed to filename + file checksum, it makes sure if the file changed then the name is changed as well. The last step of script is to update the filename in all the places where it is referenced. For more information please check my other blog link.
Please visit my sites tool section as well. Find file differences