如何使用RequireJS实现延迟加载？

Question

我们正在使用Backbone,RequireJS和Handlebars构建一个非繁琐的Web应用程序,好吧,我只是很好奇.目前,我们的每个型号排序如下:

define(['Backbone', 'js/thing/a', 'js/thing/b', 'js/lib/bob'], function(a, b, bob) {
  return Backbone.Router.extend({
    // stuff here
  });
});

其中thing/a,thing/b都有自己的依赖关系,例如Handlebars模板等.现在发生的是在我的main.js中,所有"顶级"路由器都被加载并初始化; 每个顶级路由器都有一组依赖项(模型,视图等),每个依赖项都有自己的依赖项(模板,帮助程序,工具等).基本上,一个大树结构.

这种情况下的问题是整个树在页面加载时被解析并加载.我不介意每个人,因为我们最终将通过优化器运行它并最终得到一个大的单个文件(将RequireJS简化为基本上模块化框架).但是,我很好奇你是否可以按需加载视图和模板等内容.

还有就是"简化CommonJS的包裹解释说:" 在这里,所以我试过了:

define(function(require) {
  Backbone = require('Backbone');
  return Backbone.Router.extend({
    doStuff: function() {
      var MyView = require('js/myView');
      new MyView().render();
    }
  });
});

但是,看看Chrome的网络检查器,似乎RequireJS - 即使没有触发触发doStuff处理程序的路径 - 仍会加载myView依赖项.问题:

• 这有可能吗？RequireJS中是否有黑色魔法,它们在require()没有实际触发doStuff路线的情况下寻找呼叫？
• 这是理论上正确的"按需"方式,需要延迟加载RequireJS模块和资源吗？
• 如果使用这种表示法,r.js优化器是否仍然像宣传的那样工作？

Answer 1

这有可能吗？RequireJS中是否有黑色魔法,它们在没有实际触发doStuff路由的情况下查找require()的调用？

当你使用'sugar'语法时它使用Function.prototype.toString和一个正则表达式来提取你的引用require,然后在运行函数之前将它们列为依赖项.基本上,它成为定义的正常样式,其中deps数组作为第一个参数.

因此,它不关心你的require调用的位置,这就是忽略条件语句的原因(它也解释了为什么这些require调用必须使用字符串文字,而不是变量).

这是理论上正确的"按需"方式,需要延迟加载RequireJS模块和资源吗？

正如您所见,使用糖语法将不允许条件加载.我能想到的唯一方法是使用一require组deps和一个回调来调用:

define(function(require) {
    var module1 = require('module1');

    // This will only load if the condition is true
    if (true) {
        require(['module2'], function(module2) {

        });
    }

    return {};
});

唯一的缺点是另一个嵌套函数,但如果你在性能之后,那么这是一个有效的路线.

如果使用这种表示法,r.js优化器是否仍然像宣传的那样工作？

如果你使用'糖'语法然后是,优化器将正常工作.一个例子:

模块/ test.js

define(function(require) {
    var $ = require('jquery');
    var _ = require('underscore');

    return {
        bla: true
    }
});

一旦由r.js编译,这看起来像:

define('modules/test', ['require', 'jquery', 'underscore'], function(require) {
    var $ = require('jquery');
    var _ = require('underscore');

    return {
        bla: true
    }
});

总而言之,您可以有条件地加载内容,但正如您所提到的,如果您打算使用r.js优化项目,那么仅使用糖语法就没有巨大的开销.