javascript - 为什么 require.js 似乎在初始页面加载时加载了我的所有模块？

Question

我正在使用 requirejs 开发一个单页 Backbone 应用程序，今天当我部署到我们的 beta 服务器时，我发现初始页面加载大约需要 20 秒，同时它会获取所有脚本。

我假设这是因为我在定义模块时使用了依赖数组:

define([
    'ui',
    'models/user',
    'collections/campaigns',
    'collections/groups',
    'collections/keywords',
    'collections/inboxes',
    'collections/templates',
    'collections/contacts',
    'router'
], function (Ui, UserDetails, Campaigns, Groups, Keywords, Inboxes, Templates, Contacts, Router) {

    return {
        start: function () {
            // ...
            // initialize and start app
            // ...
        }
    }
});

我认为这意味着当加载主应用程序模块时，将加载所有其他脚本，因为每个模块都在使用此方法。

然后我更改了获取模块的方法，以便在我需要它们时通过直接调用 require('...') 来获取它们，如下所示:

define(function (require) {
    return Backbone.Router(function () {
        // ...
        // route initializtion etc
        // ...

        inbox: function (routeVar) {
            var InboxView = require('InboxView');
            this.inboxView = new InboxView();
            // render view etc
        }
    });
});

然而令我惊讶的是，再次运行应用程序并检查 chrome 开发者控制台的网络选项卡时 - 我看到应用程序正在获取我的所有模块，并且我得到了相同的页面加载时间。

我是否完全忽略了这里的重点？因为我的印象是每次调用 require 时都会获取脚本。这不对吗？

Answer 1

为了异步加载 AMD 模块，您必须调用 require 并提供一个函数回调，该函数将在加载请求的模块时调用:

require(['InboxView'], function(InboxView) {
  // Do something with InboxView here...
});

您提供的示例代码以同步方式调用了 require('InboxView')。因为您使用的是“sugar”语法，RequireJS 将检查您的代码，找到对 require() 的任何同步调用，并将这些依赖项添加到模块的顶级依赖项列表中，实际上给你这个:

define(['require', 'InboxView'], function (require) {
  return Backbone.Router(function () {
    // ...
    // route initializtion etc
    // ...

    inbox: function (routeVar) {
        var InboxView = require('InboxView');
        this.inboxView = new InboxView();
        // render view etc
    }
  });
});

...因此您看到所有模块立即加载的原因。

将异步回调添加到 require 中，你应该没问题。另外，如果您考虑一下，如果 RequireJS 等待加载 InboxView 的模块，直到您的路由被触发而没有 require 调用阻塞，直到加载完成，您的代码将如何工作？ :)