为什么要为 CommonJS require.ensure() 中的依赖项列表烦恼？

Question

来自 Webpack 文档 (https://webpack.github.io/docs/api-in-modules.html#require-ensure)：

Download additional dependencies on demand. The dependencies array lists modules that should be available. When they are, callback is called. If the callback is a function expression, dependencies in that source part are extracted and also loaded on demand. A single request is fired to the server, except if all modules are already available.

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

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

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

"b"和"d"不在依赖列表中，但会像"a"一样按需加载。那有什么区别呢？

Answer 1

答案在文档中：

Download additional dependencies on demand. The dependencies array lists modules that should be available. When they are, callback is called. If the callback is a function expression, dependencies in that source part are extracted and also loaded on demand. A single request is fired to the server, except if all modules are already available.

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

Answer 2

您链接到的文档中的示例显示了行为不同的一种方式。当您指定依赖项时，它会显式创建一个新块，将依赖项放入其中，并添加回调中引用的任何其他依赖项。当您不指定依赖项时，回调中的任何依赖项都会添加到 'current'（最后一个？）块，不会创建新块。

Answer 3

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

问题的根源

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

Raúl Ferràs: Is there any advantage between these two forms?

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: No difference... even the generated source is equal. But the spec says the dependency should be in the array.

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

"require.ensure" accepts an array of module identifiers as first argument and a callback function as second argument.

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

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

因此，在我看来，异步加载 required 但未列出的模块是 Webpack 的一个特性，并且与规范有偏差。这种特性使得第一个参数在大多数情况下毫无意义并引发问题。

用例

1。遵守规范

第一个参数的一个用例可能是指定所有依赖项以明确并遵守规范。但这完全是可选的。

2。将模块拉入特定的块

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

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

为什么要为 CommonJS require.ensure() 中的依赖项列表烦恼？

Why bother with dependencies list in CommonJS require.ensure()?

commonjs

webpack

问题的根源

用例

1。遵守规范

2。将模块拉入特定的块