43

I'm using require.js and r.js to package my AMD modules. I'm using jquery & requirejs via the following syntax:

<script data-main="/js/client" src="/js/external/require-jquery.js"></script>

This all works great pre & post packaging, but I run into issues a lot where chrome & mobile safari hold on to the cached version of client.js. I'd like to add a cachebuster to client.js, but I can't seem to figure out how to do it using the above syntax.

I tried some variations of:

<script data-main="js/client.js?b=busted" src="/js/external/require-jquery.js"></script>

but now require tries to get client.js from /, not /js, so it 404s.

I also tried adding

urlArgs : "bust="+new Date().getTime()

to require.config, but it appears to have no effect.

I also tried adding the same value to app.build.js, but when it's in there, r.js no longer concatenates my js files, just uglifies them.

What is the proper syntax to bust a require.js data-main script cache?

1
  • data-main="/static/code/main.js?git_sha=ae9f10b520" worked for me.
    – Bob Stein
    Nov 5, 2017 at 18:14

2 Answers 2

76

How are you defining your require.config? I think for it to take effect before you import require.js, you need to code it like this:

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+new Date().getTime()
    };
</script>
<script data-main="app/main" src="/scripts/require.js"></script>

Specifically, a an object named 'require' must be constructed before you import require.js.

UPDATE

As Jesse points out in the comments below, there are a few enhancements you should apply to your require{} object for production use. The above example is cribbed from the RequireJS documentation and modified as little as possible to answer this question.

Here are a few things to consider for production use:

  • Instead of using the current date-time as your cache-busting variable, you should use a build number from your development environment. This allows your clients to cache the Javascript between releases but will cause them to refresh their cache whenever you do a software update.
  • Jesse also uses the require{}'s ability to specify dependencies instead of using the data-main attribute of the script. I don't know if that is strictly better, but I think it is cleaner looking.
  • Adjust the waitSeconds based on your needs. I used the example value from the RequireJS documentation, but you should adjust the value or omit it, based on your needs.

So if you apply these techniques, your code might look like:

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+{{buildNumber}},
        deps : ['app/main']
    };
</script>
<script src="/scripts/require.js?bust={{buildNumber}}"></script>

Note, in this case {{buildNumber}} is a value supplied by the server.

UPDATE 2

The urlArgs cache bust solution has problems. Unfortunately you cannot control all proxy servers that might be between you and your user's web browser. Some of these proxy servers can be unfortunately configured to ignore URL parameters when caching files. If this happens, the wrong version of your JS file will be delivered to your user.

I would recommend using a buildNumber in your Javascript filename request, like buildNumber.myModule.js (prefix) or myModule.buildNumber.js (postfix). You can use the prefix style by modifying the baseUrl:

baseUrl: "/scripts/buildNumber",

Note the lack of a '/' at the end of the baseUrl.

You will need to use a modified version of require.js to use the postfix solution. You can read more about this here: https://stackoverflow.com/a/21619359/1017787

Obviously in either case you will want to use some solution to replace buildNumber with some type of version number that changes with each release.

7
  • 2
    Thanks! That's how I ended up solving it, just forgot to come back here and update.waitSeconds wasn't necessary in my case (it will default to 7 I think), and I set my bust variable on the server so it'll sync up with my app version. Also I moved the main script definition up into the require config too.
    – Jesse
    Jul 30, 2012 at 21:41
  • 3
    So in my case, the require looks like this: require = { urlArgs : "b={{buildTime}}", baseUrl : "/js", deps : ['client'] }, and the require below has no data-main. I also put the cachebuster on the require dependency, just to be thorough.
    – Jesse
    Jul 30, 2012 at 21:44
  • 3
    Thanks for this I had to empty Chrome cache to get the refreh to work, I wonder why this information was so hard to find... Oct 4, 2012 at 13:24
  • @JBCP How will someone add buildNumber in data-main attribute in the bootloader file in HTML(not in jsp)? Dec 2, 2014 at 10:54
  • 2
    Re: "Unfortunately you cannot control all proxy servers that might be between you and your user's web browser." That not a problem if you're using HTTPS.
    – Greg
    Apr 1, 2016 at 21:04
-2

Here is my solution (for emergency) :

  1. Find the following code in require.js:

Development version

//Join the path parts together, then figure out if baseUrl is needed.
url = syms.join('/');
url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js'));
url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;

OR

Production version

e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");
  1. and add ?v=x.0 after the .js

    url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js?v=1.0'));

    OR

    (/^data\:|\?/.test(d)||c?"":".js?v=1.0");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.