Cache busting with Grunt

In my previous post I talked about using Grunt to automate my build and deploy. In this post I'll talk about using Grunt to cache-bust my webapp.

Requirement

• I want to maximise the use of caching for JS and CSS files (with long expiry periods set in .htacess), but if a file is updated, the newer file should be requested instead of the cached version
• I use requireJS to conditionally load modules - these modules require cache busting, but CDN hosted library resources like jquery does not.
• I prefer to keep filenames the same for different builds. My reasoning is that an older version of a revved file (eg. script.123.js instead of script.js) would be deleted when there is a new build (eg. script.124.js), and if there are any cached references somewhere pointing to the older version, the server would return 404. Perhaps this fear is unfounded if .htacess is set up to never cache .html files?

Findings

I found a few half solutions, but unfortunately not one elegant solution that fits all my requirements

1. Use RequireJS urlArgs to cache-bust JS files

In requireJS config, append a url parameter with urlArgs to each URL that requireJS loads. I use @@hashcache as a placeholder for the build hash, generates the hash in my Gruntfile and then uses grunt-replace to replace it with a generated hash.
Good:

• Cache-busts all requireJS conditionally loaded modules 

Bad:

• urlArgs is not recommended for production
• All scripts loaded will have this urlArgs appended and it will cache-bust CDN resources. This means the caching benefit is lost for a widely used CDN-loaded resource like jquery
• Another solution is required for cache-busting CSS files, and also the first file requireJS loads via data-main="" in index.html

2. Rev file references and modify rewrite rules

I took notes from here and here for a solution that revs file references but keep actual filenames unchanged.

1. Use grunt-hashres to rev and replace references to JS & CSS files, but don't rename actual files

Index.html references revved CSS & JS files: 2. Update .htaccess rewrite rule to point revved to original files


Good:

• hash is generated for each file - if a file isn't changed, its hash isn't updated - maximises the advantage of caching

Bad:

• Does not rev JS modules loaded by RequireJS 
• I have a feeling my rewrite rule may be a tad too broad? Could this accidentally effect other files?

3. Cache-busting requireJS modules

The above solution is able to cache-bust anything except for conditionally loaded requireJS modules not referenced in index.html. For each of these modules, I need to:
1. Configure module path in requireJS config so it'll load a revved file path, with the original path as backup

2. Configure module path in Gruntfile so the optimiser knows where to look for the module

3. Use grunt-replace to replace references to @@cachehash with a hash for each build

Good:

• cache-busts without using urlArgs; Only busts files that require it, and not CDN files

Bad:

• require fiddly manual configuration for each conditionally-loaded file

• Same hash is used for all files per build. So even if a file hasn't updated since last acess, it will still be reloaded. Not a big issue but not as cache-optimised as the previous solution.

Conclusion

I'm using both 2 and 3 for my project. Although the cobined solution covered all my requirements, I think this is still a work in progress as  it feels clunky with all the configuration required for 3. What I need is a grunt task that does file revving with support for requireJS! I'll continue to investigate, and would appreciate any suggestions!