如何实现延迟加载与RequireJS？ [英] How to achieve lazy loading with RequireJS?

问题描述

我们正在建立使用骨干，RequireJS和把手非繁琐的Web应用程序，和好，我只是好奇。目前，我们的每一个车型有几分是这样的：

We're building a non-trival web application using Backbone, RequireJS and Handlebars, and well, I'm just curious. At the moment, each of our models sorta looks like this:

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

在这里的事情/一，东西/ B都有自己的依赖，例如在车把模板等什么，现在的情况是，在我main.js，所有的'顶级'的路由器被加载和初始化;每个顶级路由器有一组相关性（模型，视图等），它们都有自己的依赖（模板，佣工，utils的，等等）。基本上，一个大的树结构。

where thing/a, thing/b both have their own dependencies, for example on Handlebars templates, etc. What happens now is that in my main.js, all of the 'top-level' routers are loaded and initialized; each top-level router has a set of dependencies (models, views, etc) which each have their own dependencies (templates, helpers, utils, etc). Basically, a big tree structure.

在这种情况下的问题是，这整个树被解析并加载页面负载。我不介意本身，因为我们将通过优化最终运行它，并与一个大的单个文件（减少RequireJS基本上一个模块化的框架）结束。不过，我很好奇，你是否可以加载的东西一样的观点和模板按需。

The problem in this case is that this entire tree is resolved and loaded on page load. I don't mind that per sé, as we'll run it through the optimizer eventually and end up with one big single file (reducing RequireJS to basically a modularization framework). However, I am curious whether you can load stuff like views and templates 'on demand'.

还有就是简化包装CommonJS的解释说：这里，所以我尝试了：

There is the "simplified CommonJS wrapping" explained here, so I tried that:

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看起来将呼叫黑magicks需要（）没有实际触发 doStuff 路线？


• 这是要去关于点播理论上正确的方法的RequireJS模块和资源懒加载？


• 是否r.js优化仍然如果你使用这个符号工作广告？

• Is this actually possible? Are there black magicks in RequireJS that looks for calls to require() without actually triggering the doStuff route?
• Is this the theoretically correct way of going about 'on-demand', lazy loading of RequireJS modules and resources?
• Does the r.js optimizer still work as advertised if you use this notation?

推荐答案

这是实际可能吗？是否有RequireJS黑色magicks看起来通话要求（）没有实际触发doStuff路线？的

Is this actually possible? Are there black magicks in RequireJS that looks for calls to require() without actually triggering the doStuff route?

当您使用'糖'语法<一个href=\"https://github.com/jrburke/requirejs/blob/42dba3d9814bf3e901917dd31e464fa5145394fd/require.js#L1926-1947\">it使用 Function.prototype.toString 和正则表达式以提取您的引用要求，然后列出它们作为运行该功能之前依赖。基本上它成为与DEPS数组作为第一个参数定义的普通样式。

When you use the 'sugar' syntax it uses Function.prototype.toString and a regex to extract your references to require and then lists them as dependencies before running the function. Basically it becomes the normal style of define with an array of deps as the first argument.

由于此，它并不关心在您需要调用是，这就是为什么条件语句被忽略（这也解释了为什么那些要求呼叫必须使用一个字符串文字，而不是可变的）。

Because of this, it doesn't care where your require calls are and that's why conditional statements are ignored (it also explains why those require calls have to use a string literal, and not a variable).

这是要去关于'点播'的RequireJS模块和资源懒加载？的

Is this the theoretically correct way of going about 'on-demand', lazy loading of RequireJS modules and resources?

使用糖语法不会允许有条件的加载如您所见。我能想到的把我的头顶部的唯一方法是使用要求与DEPS阵列和一个回拨电话：

Using the sugar syntax won't allow conditional loading as you've seen. The only way I can think of off the top of my head is to use a require call with an array of deps and a callback:

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

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

        });
    }

    return {};
});

唯一的缺点是另一个嵌套函数，但如果你的表现后，那么这是一个有效的途径。

Only downside is another nested function but if you're after performance then this is a valid route.

是否r.js优化仍然如果你使用这个符号工作广告？的

Does the r.js optimizer still work as advertised if you use this notation?

如果您使用的'糖'语法，然后是的，优化器将正常工作。举个例子：

If you're using the 'sugar' syntax then yes, the optimiser will work fine. An example:

模块/ test.js

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

    return {
        bla: true
    }
});

一旦被编译r.js这个样子：

Once compiled by r.js this looks like:

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

    return {
        bla: true
    }
});

总之，你可以有条件地加载的东西，但正如你所说，如果你打算用最优化的r.js项目那么有没有只用糖语法巨大的开销。

In conclusion you can load stuff conditionally, but as you mentioned, if you intend to optimise the project with r.js then there isn't a huge overhead in just using the sugar syntax.

这篇关于如何实现延迟加载与RequireJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！