Cache busting specific modules with RequireJS

Question

This question has been asked several times but not specific to this example.

Here is an overview of our application:

• Simple server routing with Express on Node
• Single page backbone application
• Core modules and libraries (JS/CSS) that don't change
• Widget JS/LESS/HTML files that frequently change

During development, I am looking to cache bust files that change but not those core libraries to speed up my page reloads and quicken my development.

I have found explanations on:

1. Cache Busting on RequireJS - here
2. Explanation on Cache Busting Specific Modules - here

Could the solution:

1. Explain how the requireJS caching busting works?
2. Provide a solution for this specific scenario.

Answer 1

The cache-busting works by appending an always-unique query string to the end of every file which is required. It makes use of RequireJS's urlArgs config value; RequireJS takes care of appending it for you:

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

The(new Date()).getTime() part is just a simple way to get a unique string out of JavaScript. You could do some variation on Math.random(), but using the number of milliseconds since the epoch guarantees uniqueness, for optimum cache-bustage.

I think Mr Burke is suggesting something like:

require.config({
    baseUrl: '/base/path',
    paths: {
        'fileAlias': 'fileLikelyToChange?bust=' + (new Date()).getTime(),
        'anotherFileAlias': 'anotherFileLikelyToChange?bust=' + (new Date()).getTime(),
        'jQuery': 'jQuery'
    },
});

So, instead of the ubiquitous urlArgs cache-busting, you apply it specifically to each file which is likely to change; hence, excluding any libraries.

I haven't tested it, but I'd probably tidy it up to something like:

function bust(path) {
    return path + '?bust=' + (new Date()).getTime();
}

require.config({
    baseUrl: '/base/path',
    paths: {
        'fileAlias': bust('fileLikelyToChange'),
        'anotherFileAlias': bust('anotherFileLikelyToChange'),
        'jQuery': 'jQuery'
    },
});