webpack require.ensure第一个参数使用

Question

webpack的第一个参数有什么用途require.ensure第一个参数？

https://webpack.github.io/docs/code-splitting.html

require.ensure(dependencies, callback)

我尝试让第一个参数填充或清空，如：

require.ensure(['./module'], function() {  //filled first param

require.ensure([], function() {  //empty first param
  let module = require('./module');
  $ocLazyLoad.load([{
    name: module.default,
  }]);
});

两者都有效。那么第一个参数的用途是什么？

文档中还有一个require.include函数，我不理解这个函数的用例。任何人都可以解释一下吗？

Answer 1

这些函数与Code Splitting有关，它允许代码的某些部分与主代码分开捆绑，并在代码运行时加载并运行。

代码示例1：

require.ensure(['./module'], function() {  //filled first param

第一个参数是一个模块数组，用于确保在运行回调之前加载。如果尚未在其中一个bundle中加载./module，它将加载该模块包含在新HTTP请求中的块，然后调用回调函数。

使用Webpack的例子：

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    // ...
});

module-a和module-b现在可以拆分为不同的文件，并且回调函数在加载之前不会运行。

代码示例2：

require.ensure([], function() {  //empty first param
  let module = require('./module');
  $ocLazyLoad.load([{
    name: module.default,
  }]);
});

此处require.ensure定义了一个分裂点。由于它在数组中没有任何依赖项，因此它本身不会加载任何模块。但是，回调中的require语句仍将通过webpack的魔力动态加载，./module将捆绑在一个单独的文件中。

require.include

  

文档中还有一个require.include函数，我不了解这个函数的用例。任何人都可以解释一下吗？

require.include可用于确保捆绑模块，即使它不是require。通常，如果模块不是require - ed，则根本不会捆绑它。这可以用来强制它包含模块，即使它不是requir - 在包本身中。

Answer 2

第一个参数很少有用。要了解原因并导致混淆，请查看我的另一个answer。

遵守规范

第一个参数的一个用例可能是为了清晰起见而指定所有依赖项并遵守spec。但这完全是可选的。

将模块添加到块中以使块类似

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

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

将模块拉入父块

考虑以下代码拆分方案：

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

  require.ensure([], (require) => {
    require('a');
    require('c');
  });
  ...
});

在这种情况下，模块a将以两个嵌套的块结尾。如果经常加载至少一个嵌套块，您可以决定将a移动到父块中：

require.ensure(['a'], (require) => {
  ...

使用require.include

将模块添加到块中

考虑前面的例子。还有另一种方法可以将a拉入父块：

require.ensure([], (require) => {
  require.include('a');
  ...

在这个特定示例中，两个解决方案都是等效的，使用require.include没有任何优势。但是，如果您无法访问分割点的代码，则父块是一个条目块，或者您使用现代import()语法，require.include是您唯一的选择。

可以使用同步require或import将模块拉入块。 require.include的优点是它只加载模块而不评估它们。如果模块价格昂贵或取决于应用程序状态，例如需要加载polyfill，存在DOM节点等，则推迟模块评估可能很有用。