requirejs - 要求的多个调用的性能

Question

我想知道在具有多个模块的项目中使用RequireJS的正确方法是什么,关于具有较少依赖性的多个require调用的性能与具有所有依赖性的单个require的性能.

让我们来看看,对于一个应用程序,我需要加载一些模块:gmaps, jquery, module1, module2, module3.某些模块的使用是相当独立的.因此,问题是建议使用以下哪种替代方法(假设此代码是加载到页面中的主要模块):

require(['gmaps'], function(gmaps){
   gmaps.use();
});

require(['jquery','module1'], function(jquery, module1){
   module1.use();
});

require(['jquery','module2'], function(jquery, module2){
   module2.use();
});

require(['jquery','module3'], function(jquery, module3){
   module3.use();
});

VS

require(['jquery','module1','module1','module1','gmaps'], function(jquery, module1,module2,module3,gmaps){
   module1.use();
   module2.use();
   module3.use();
   gmaps.use();
});

换句话说,什么是性能损失,require哪种是最佳实践.

Answer 1

这里问题的答案是"它取决于".我说的是在大型应用程序中使用RequireJS但没有彻底阅读RequireJS代码的人.(只是指出那些了解RequireJS内部和外部的人可能会解释与我不同的方式.)成本require可以分解为3种成本方案:

1. 如果模块从未加载过,require则从服务器加载文件,执行文件,执行模块的工厂函数并返回对模块的引用.(从网络加载文件的成本通常使其他成本相形见绌.)

2. 如果模块已经加载但从不需要,则require执行模块的工厂功能并返回对模块的引用.(这通常发生在优化的应用程序中.)

3. 如果已加载并且需要require模块,则返回对模块的引用.

成本方案1>成本方案2>成本方案3.

首先,让我们考虑每个文件有一个模块的情况.应用程序未优化.我有一个名为的模块module1,在蓝色的月亮中需要一次.它在主应用程序中的用法可以像这样建模:

define(["module1", <bunch of other required modules>],
    function (module1, <bunch of other modules variables>) {

    [...]

    if (rare_condition_happening_once_in_a_blue_moon)
        module1.use();

    [...]
});

在这里,即使我不使用该模块,我也总是支付成本方案1的价格.最好这样做:

define([<bunch of required modules>],
    function (<bunch of module variables>) {

    [...]

    if (rare_condition_happening_once_in_a_blue_moon)
        require(["module1"], function (module1) {
            module1.use();
        });

    [...]
});

这样,我只需要在蓝月亮中加载模块一次.

现在,如果我需要module反复使用怎么办？这可以建模为:

define(["module1", <bunch of other required modules>],
    function (module1, <bunch of other modules variables>) {

    [...]

    for(iterate a gazillion times)
        module1.use();

    [...]
});

在这种情况下,成本方案编号1支付一次,这就是全部.如果我这样使用require:

define([<bunch of required modules>],
    function (<bunch of module variables>) {

    [...]

    for(iterate a gazillion times)
        require(["module1"], function (module1) {
            module1.use();
        });

    [...]
});

我支付一次成本方案1 和一个(数十亿次 - 1)成本方案编号3.在一天结束时,是否module1应该包括在define呼叫要求或单独require呼叫中取决于具体情况你的申请.

如果通过使用r.js或自制优化来优化应用程序,则分析会发生变化.如果应用程序已经过优化,所有模块都在一个文件中,那么每次在上述情况下支付成本方案1时,您都需要支付成本方案2.

为了完整起见,我将补充一点,如果您提前不知道要加载的模块,require则必须使用.

define([<bunch of other required modules>],
    function (<bunch of other modules variables>) {

    [...]

    require(<requirements unknown ahead of time>, function(m1, m2, ...) {
        m1.foo();
        m2.foo();
        [...]
    });

    [...]
});