If I decide to use last_modified_time of a javascript or css file, and use the unix timestamp of it as a key in the name to bust cache when file is modified. What is the difference between following two practices ? filename is : my_script.js and timestamp is : 1321951817
1/ File gets included as :
<script type="text/javascript" src="http://example.com/js/my_script.js?v=1321951817"></script>
Hence,the query string parameter creates a new cache everytime the v
is changed.
2/ File gets included as :
<script type="text/javascript" src="http://example.com/js/my_script.1321951817.js"></script>
The filename changes with every modification, a rewrite rule removes the timestamp and points the requested url to my_script.js
3/ UPDATE: ONE MORE METHOD BASED ON ANSWERS BELOW : File is renamed and get included as :
<script type="text/javascript" src="http://example.com/js/my_script.1321951817.js"></script>
The filename is changed and NO REWRITE RULE is used.
Question : Are these two techniques inherently the same, or are there any advantages/disadvantages of using query string parameters instead of direct file name.
Answers. You can't prevent IE or for that matter any browser from caching Java Script file, you can only direct browser to always fetch latest version of Javascript file from the web server using the solution provided above. Tools->Internet Options. general tab->Settings and select the option "Every time ..."
Our JavaScript is Cached in the Browser, so our page should be fast! Bundle size doesn't matter since the bundles are stored in cache! We just completed our React migration, so we were expecting sizeable performance improvements, especially when the JS is cached!
Hit CTRL-F5 or CTRL-SHIFT-R in most modern browsers to force reload. Use the developer's console to clear the cache.
Using an updated querystring is a bad solution. See what Steve souders has so say about it: http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
The ideal method is to rename the file itself. Some people prefer using the time stamp of the last modification date, which i think is a problem.
In modern web development you really need to optimize your page as much as possible, which means combining css and javascript into single files which are minfied. That means that you introduce a build step into your process, and that the last modification time of your file always will be at your last build. If you set that as your file name, you essentially bust the users cache all the time, and some times you dont need to.
I recommend renaming the files to an md5 sum of their content. That way you can do new builds all the time, but the file name only changes if the content changes. This makes your file name an identifier of the content. Using this you can set a far future expires header on all your static content and simply stop worrying about it any more.
I can recommend using a build system for this, since this workflow gets boring fast. My company open sourced one a while ago that does this among a lot of other things that optimize your web page: https://github.com/One-com/assetgraph-builder There are many other build tools that do the same. Take a look around and find the one that best suits your development setup.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With