Question

从Webpack文档（https://webpack.github.io/docs/api-in-modules.html#require-ensure）：

按需下载其他依赖项。 dependencies数组列出了应该可用的模块。如果是，则调用回调。如果回调是函数表达式，则提取该源部分中的依赖项，并根据需要加载。除非所有模块都已可用，否则将向服务器发出单个请求。

如果源部分中的依赖项也被按需提取和加载，那么为什么还要在依赖项列表中添加任何内容？

我见过这样的例子非常令人困惑（https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk）：

require.ensure(["./a"], function(require) {
    require("./b");
    require("./d");
});

＆＃34; B＆＃34;和＆＃34; d＆＃34;不在依赖列表中，但将按需加载，就像＆＃34; a＆＃34;。那么差异是什么？

Answer 1

您链接到的文档中的示例显示了行为不同的一种方式。指定依赖项时，它会显式创建一个新块，将依赖项放入其中，并添加回调中引用的任何其他依赖项。如果您没有指定依赖关系，则回调中的所有依赖关系都会添加到“当前”状态。（最后？）块，没有创建新的块。

Answer 2

简而言之：你不应该打扰。

问题的根源

Webpack的作者Tobias Koppers在Gitter上被问到类似的问题：

RaúlFerràs：这两种表格之间有什么优势吗？

require.ensure(['jquery','Backbone','underscore'], function(require){
    var jQuery = require('jquery'),
    Backbone  = require('Backbone'),
    _ = require('underscore');
};

和这个

require.ensure(['jquery'], function(require){
    var jQuery = require('jquery'),
    Backbone  = require('Backbone'),
    _ = require('underscore');
};

Tobias Koppers ：没有区别......即使生成的源也相同。但规范说依赖应该在数组中。

Webpack的require.ensure是根据CommonJS Modules / Async / A proposal实现的，其中说：

“require.ensure”接受一组模块标识符作为第一个参数，一个回调函数作为第二个参数。

规范没有指定回调中所需的非列出模块是否会异步加载，但是有一个示例代码，其中只需要数组中列出的模块：

require.ensure(['increment'], function(require) {
    var inc = require('increment').inc;
    var a = 1;
    inc(a); // 2
});

因此，在我看来，require d但非列出模块的异步加载是Webpack的一个特性，与规范有所偏差。在大多数情况下，这样的特征使得第一个论点毫无意义，并提出了问题。

用例

1。符合规范

第一个参数的一个用例可能是为了清晰并指定所有依赖项并符合规范。但这完全是可选的。

2。将模块拉入特定块

假设您在应用的不同部分有两个分割点。第一个拆分点取决于模块a，第二个拆分点取决于模块a和b。为了消除两次下载a的风险，您可以决定将两个模块放在一个块中：

// First split point
require.ensure(['b'], (require) => {
  require('a');
});

Answer 3

答案在文档中：

按需下载其他依赖项。 dependencies数组列出了应该可用的模块。如果是，则调用回调。如果回调是函数表达式，则提取该源部分中的依赖项，并根据需要加载。除非所有模块都已可用，否则将向服务器发出单个请求。

因此，如果数组中的某些依赖项不存在，那么webpack将停止，甚至不会调用回调。但是我从来没有遇到过这个有用的用例，通常每次只传递空数组

为什么要在CommonJS中使用依赖项列表require.ensure（）？

3 个答案:

问题的根源

用例

1。符合规范

2。将模块拉入特定块