37

我们在开发过程中喜欢 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 所需的额外带宽或计算负担。

我想象一个产生的连接器（我正在使用 chevron-quotes «,» 来显示上面两个模块的片段被插入的位置）：

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

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

4

5 回答 5

14

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

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

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

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

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

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

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

有关更多信息，请参阅延迟执行定义，直到第一次需要requirejs 对此进行处理。

于 2012-06-11T23:05:25.483 回答
1

唯一真正的好处是，如果您跨部分使用模块，那么独立缓存模块是有好处的。

于 2012-06-11T23:26:42.480 回答
1

我也有同样的需求，所以我为此创建了一个简单的 AMD“编译器”。您可以在https://github.com/amitayh/amd-compiler获得它

Please note that it has many features missing, but it does the job (at least for me). Feel free to contribute to the codebase.

于 2014-05-10T10:32:08.217 回答
0

如果您将使用 require.js 的代码编译成单个大文件用于生产，您可以使用almond.js完全替换 require。

Almond 只处理模块引用管理，而不是不再需要的加载本身。

小心杏仁为了工作而施加的限制

于 2012-11-16T09:26:56.703 回答
0

没有理由没有像您建议的那样的构建工具。

上次*我查看了优化器的输出，它将模块转换为显式命名的模块，然后将它们连接在一起。它依靠 require 自身来确保工厂函数以正确的顺序被调用，并且正确的模块对象被传递。要构建您想要的工具，您必须明确线性化模块 - 并非不可能，但需要做更多工作。这可能是它没有完成的原因。

我相信**优化器具有自动将 require 本身（或杏仁）包含到构建文件中的功能，因此您只需下载一次。这将大于您想要的构建工具的输出，但其他方面相同。

如果有一个构建工具可以产生您要求的那种输出，则必须更加小心，以防同步require、使用exports代替返回以及任何其他 CommonJS 兼容性功能。

*那是几年前的事了。2010，我想。

**但现在似乎找不到它。

于 2013-01-11T17:35:05.683 回答