console - 在控制台中记录 requirejs 的依赖关系

Question

有什么技巧可以在控制台中记录 require.js 加载的模块吗？例如加载 jQuery加载下划线加载主干

我需要这个来了解下载每个模块并记录相同模块以在不同环境下测试它需要多少时间。

谢谢，曼达尔卡特雷

Answer 1

您可以尝试类似 this fiddle 的内容，并使用内部 API onResourceLoad 。这不会提供完全准确的加载时间，但它可以让您了解哪些模块已被请求，以及在给定的开始时间后多长时间它们完成了加载。

<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>

还有这个 JS

start = +new Date();

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

在测试中产生以下输出:

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