reason
Offers a simple mechanism to allow extremely long expire-headers on scripts whilst still being able to switch to newer versions on the fly.
implementation
A js file defined with data-main attribute on the script tag of require.js, will always be loaded with current timestamp to always force a fresh load.
// main.js?cacheKey=TIMESTAMP-123412312321
<script data-main="main" src="require.js"></script>
Inside main.js you can define a cacheKey that will be appended to all loaded scripts from that point on.
// results in [root]/module.js?cacheKey=v1.0.0
require.cacheKey( "v1.0.0" );
require( "module" , function( module ){
/* code*/}
);
or using RequireJS config mechanism:
// results in [root]/module.js?cacheKey=v1.0.0
require( {
cacheKey: "v1.0.0"
} , "module" , function( module ){
/* code*/}
);
Set extreme long expire headers on .js files and you get optimal browser caching whilst able to update an entire dependency tree by setting one value.
As an alternative to setting the cacheKey variable in javascript, it could also be passed by another data- attribute. (from Smith, see comments)
<script data-main="main" data-cacheKey="v1.0.0" src="require.js"></script>
This allows both development teams (backend/frontend) to be able to control the cacheKey. However a question of what overrides what remains.
As a bonus, you could opt to override cacheKey usage with a path-expression plugin (see path-expression gist).
// not a pretty path-expression I admit.
require( "module !nocachekey" , function( module ){
/* code*/}
);
It would be really nice to have a cacheKey property which can be read from the data attribute of the main js file, and which applies to every js file loaded with require. But using urlArgs, as presented by jrburke, does work. The way I do it now is to add a data-cacheKey property to the script parameter, like so:
And then use the following config in the main file:
This lets me set the cacheKey on the backend, and then use it for every file loaded in the frontend. A good idea for the cacheKey would be the build number or build time of the web project, which would require all the frontend files to be reloaded every time the build on the server changes