为什么串联的 RequireJS AMD 模块需要加载器? [英] Why do concatenated RequireJS AMD modules need a loader?

问题描述

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

We love RequireJS and AMD during development, where we can edit a module, hit reload in our browser, and immediately see the result. But when it comes time to concatenate our modules into a single file for production deployment, there apparently has to be an AMD loader still present, whether that loader is RequireJS itself or its smaller partner "almond" as explained here:

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

我的困惑是:为什么需要加载器?除非您有非常不寻常的情况使您有必要在模块内部进行 require() 调用，否则似乎可以在根本不存在加载器的情况下连接一系列 AMD 模块.最简单的示例是如下所示的一对模块.

My confusion is: why is a loader necessary at all? Unless you have very unusual circumstances that make it necessary for you to make require() calls inside of your modules, it would appear that a series of AMD modules could be concatenated without a loader present at all. The simplest possible example would be a pair of modules like the following.

ModA.js:

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

ModB.js:

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

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

Given these two modules, it seems that a concatenator could simply produce the following text, and not burden the production server or browser with the extra bandwidth or computation required by either RequireJS or Almond.

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

I imagine a concatenator that produces (and I am using chevron-quotes «,» to show where the snippets from the two modules above have been inserted):

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

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

This, so far as I can see, would correctly reproduce the semantics of AMD, with a minimum of extraneous glue JavaScript. Is there such a concatenator available? If not, would I be a fool for thinking that I should write one — are there really very few code bases that consist of simple and clean modules written with define() and that never need further require() calls inside that kick off later asynchronous fetches of code?

推荐答案

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

An AMD optimiser has the scope to optimise more than the number of files to be downloaded, it can also optimise the number of modules loaded in memory.

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

For example, if you have 10 modules and can optimise them to 1 file, then you have saved yourself 9 downloads.

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

If Page1 uses all 10 modules then that's great. But what if Page2 only uses 1? An AMD loader can delay the execution of the 'factory function' until a module is require'd. Therefore, Page2 only triggers a single 'factory function' to execute.

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

If each module consumes 100kb of memory upon being require'd, then an AMD framework that has runtime optimisation will also save us 900kb of memory on Page2.

关于框"样式的对话框就是一个例子.它的执行被延迟到最后一秒，因为它在 99% 的情况下都不会被访问.例如.(在松散的 jQuery 语法中):

An example of this could be an 'About Box' style dialog. Where the very execution of it is delayed until the very last second as it won't be accessed in 99% of cases. E.g. (in loose jQuery syntax):

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

您可以节省创建与关于框"相关联的 JS 对象和 DOM 的费用，直到您确定这是必要的.

You save the expense of creating the JS objects and DOM associated with the 'About Box' until you are sure it's necessary.

有关详细信息，请参阅延迟执行定义直到第一次需要，以了解 requirejs 对此的看法.

For more info, see Delay executing defines until first require for requirejs's take on this.

这篇关于为什么串联的 RequireJS AMD 模块需要加载器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！