javascript - 为什么串联的 RequireJS AMD 模块需要加载程序？

Question

我们在开发过程中喜欢 RequireJS 和 AMD，我们可以在其中编辑模块，在浏览器中点击重新加载，并立即看到结果。但是当需要将我们的模块连接到一个文件中以进行生产部署时，显然必须仍然存在 AMD 加载器，无论该加载器是 RequireJS 本身还是它的较小伙伴“almond”，如下所述:

http://requirejs.org/docs/faq-optimization.html#wrap

我的困惑是:为什么需要加载程序？除非您有非常特殊的情况需要在模块内部调用 require()，否则一系列 AMD 模块似乎可以在根本没有加载程序的情况下连接起来。最简单的示例是一对模块，如下所示。

ModA.js:

define([], function() {
    return {a: 1};
});

ModB.js:

define(['ModA'], function(A) {
    return {b : 2};
});

鉴于这两个模块，连接器似乎可以简单地生成以下文本，而不会给生产服务器或浏览器带来 RequireJS 或 Almond 所需的额外带宽或计算负担。

我想象一个连接器产生(我使用人字形引号 «,» 来显示上面两个模块的片段被插入的位置):

(function() {
    var ModA = «function() {
        return {a: 1};
    }»();
    var ModB = «function(A) {
        return {b : 2};
    }»(ModA);
    return ModB;
})();

据我所知，这将正确地重现 AMD 的语义，同时使用最少的无关粘附 JavaScript。有这样的连接器吗？如果不是，我会不会认为我应该写一个傻瓜——真的很少有代码库由用 define() 编写的简单干净的模块组成，并且永远不需要进一步的 require() 内部的调用会启动以后的异步代码获取吗？

Answer 1

AMD 优化器不仅可以优化要下载的文件数量，还可以优化内存中加载的模块数量。

例如，如果您有 10 个模块并且可以将它们优化为 1 个文件，那么您就可以节省 9 次下载。

如果 Page1 使用所有 10 个模块，那就太好了。但是如果 Page2 只使用 1 呢？ AMD 加载器可以延迟“工厂函数”的执行，直到模块被require。因此，Page2 只触发一个“工厂函数”来执行。

如果每个模块在被require时消耗 100kb 的内存，那么具有运行时优化的 AMD 框架也将为我们在 Page2 上节省 900kb 的内存。

这方面的一个例子可以是“关于框”样式的对话框。它的执行被延迟到最后一秒，因为在 99% 的情况下它不会被访问。例如。 (松散的 jQuery 语法):

aboutBoxBtn.click(function () {
    require(['aboutBox'], function (aboutBox) {
        aboutBox.show();
    }
});

在您确定有必要之前，您可以节省创建与“关于框”关联的 JS 对象和 DOM 的费用。

有关详细信息，请参阅 Delay executing defines until first require对于 requirejs 对此的看法。