Log the dependencies in console for requirejs

Question

Is there any trick to log the modules being loaded by require.js in the console? e.g. Loading jQuery Loading Underscore Loading Backbone

I need this to understand how much time it is taking to download each module and log the same to test it under different environments.

Thanks, Mandar Katre

Answer 1

You could try something similar to this fiddle, and use the internal API onResourceLoad. This won't give completely accurate load times, but it will give you an idea of which modules have been requested, and how long after a given start time they had finished being loaded.

<script>
require = {
    paths: {
        "jquery": "http://code.jquery.com/jquery-2.0.3",
        "underscore": "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min"
    },
    shim: {
        "underscore": {
            deps: ["jquery"],
            exports: "_"
        }
    }
};
</script>
<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
<script>
// https://github.com/jrburke/requirejs/wiki/Internal-API:-onResourceLoad
requirejs.onResourceLoad = function(context, map, depArray) {
    var duration = new Date() - start;
    console.log("onResourceLoad", duration + "ms", map.id);
}
</script>

and this JS

start = +new Date();

require(["jquery", "underscore"], function() {
    // log the global context's defineds
    console.log("require.s.contexts._.defined", require.s.contexts._.defined);
});

Produces this output in the test:

onResourceLoad 140ms jquery
onResourceLoad 167ms underscore
require.s.contexts._.defined  Object {jquery: function, underscore: function}