Javascript Minification Caching Issue

4
votes

I Have ASP.Net MVC 3 App. Im using YUICompressor.Net for minifying Javascripts & Css Files during the post build using MSBuild.

The generated minified javascript file is JSMin.js and CssMin.css My master page refers to these files as below:

link rel="stylesheet" href="@Url.Content("~/Content/CssMin.css")" type="text/css">

script type="text/javascript" src="@Url.Content("~/Scripts/JsMin.js")" >

Now the issue is minified version gets cached in the end users browser, so our new fixes in te javascript/css is not reflected in the end user browser because those files gets cached as it is using the same file name. I'm looking for some kind of clean process which will build the minified javascript & Css file with version number to it like JsMin1.0.js & CssMin1.1.js and automatically update the reference for the below

link rel="stylesheet" href="@Url.Content("~/Content/CssMin.css")" type="text/css">

script type="text/javascript" src="@Url.Content("~/Scripts/JsMin.js")" >

Your help is highly appreciated. Thanks.

3
javascriptcssfileversionminify
Just to clarify: Are you looking for a tool that will automate appending the version number (and then update references to it)? – dgvid
Yes some kind of tool with minial effort. – user1084158

3 Answers

0
votes

You need to use cache busting in your CDN static media resource URLs:

http://codebetter.com/karlseguin/2010/01/11/asp-net-performance-part-3-cache-busting/

You cannot clear browser cache.

0
votes

Yes. You need to change the url. Otherwise the user's browser cche is likely to serve the last viewed version. Its best to version your resources so that a version string becomes part of the url. You typically want to put this version string in the path or file name and not the query string so that it plays nice with all proxies and CDNs. This can undoubtedly be a pain. You not only have to version the file but you have to make sure your links are all updated as well so you either need to change them manually or have a build process or app architecture that takes care of this for you.

I have a OSS project, RequestReduce, that minifies and combines css and js at run time. The solution handles all the link rewrites. The only catch is that when you change content, you do have to flush the RequestReduce cache which is easy to do from a dashboard provided by the app.

It also sprites and optimizes background images.

Check out http://www.requestreduce.com for more info.

0
votes

You could use a solution such as https://github.com/vincpa/mvc.resourceloader which will take care of browser caching and set the appropriate etag headers and maintain versions. Then again, I wrote this library so I'm biased :)

In my opinion, it's better to use a hash rather than a version number. That way you don't need to keep track of what version you're up to.

Also, you want to avoid adding in version numbers in query strings as some proxies do not cache resources that contain query strings.