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

Question

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

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

谢谢，曼达卡特

Answer 1

您可以尝试与此小提琴类似的东西，并使用内部 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}