为什么串联的RequireJS AMD模块需要装载程序? [英] Why do concatenated RequireJS AMD modules need a loader?
问题描述
我们在开发过程中喜欢RequireJS和AMD，可以在其中编辑模块，在浏览器中重新加载并立即查看结果.但是，当需要将我们的模块连接到一个文件中以进行生产部署时，显然仍然必须存在AMD加载程序，无论该加载程序是RequireJS本身还是其较小的合作伙伴杏仁"，如下所述:
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模块为止.因此，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.
有关更多信息，请参见延迟执行定义，直到第一个require为止
For more info, see Delay executing defines until first require for requirejs's take on this.
这篇关于为什么串联的RequireJS AMD模块需要装载程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
