Cache busting a web site optimized by Require.js

Question

I have a web app that uses require.js throughout (apart from a couple of CDN provided resources). I am using the optimize tool to create a 'published' site.

My concern is that when a new version of the web app is published users will not get updated js files, as they will be cached by the browser.

The problem is very evident when developing the app unless the 'urlArgs' config option is used.

The usual solution is to append a querystring of ?v=1.0 to the script references, but as they are all handled via require.js there is no way of doing this.

So, my question is how can I ensure clients download new versions of the js/css files when a new version is published?

Why not just use the urlArgs option that you mentioned? – Simon Smith Jul 13 '12 at 12:34 — Simon Smith, Jul 13 '12 at 12:34
@SimonSmith urlArgs cant be used when optimising – David Jul 13 '12 at 12:38 — David, Jul 13 '12 at 12:38

score 1 · Answer 1 · answered Oct 19 '12 at 18:55

If you are using require.js, then you have to set the "bust" urlArgs befre using the require object. Like so:

<script>
    var require = {
        urlArgs : "bust=" + releaseVersion
    };
</script>

I was in a similar situation for CSS and images. If your web app is behind Apache, you can set the cache-control header to http response in the mod_headers module. In my case, my web app is not behind Apache. I directly hit Glassfish. So I ended up adding a Servlet filter and manually added the cache-control header to each CSS and image response before forwarding it to the filter chain. After that, when ever there is a CSS change, I just add a url parameter in the HTML like so:

<... "main.css?version=release10" />

The browser sees this URL change and fetches the CSS from server. The same goes for images. For JS you have to update the "Bust" value.

Cache busting a web site optimized by Require.js

1 Answers1