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

第一个参数是一个模块数组，以确保在运行回调之前加载。如果./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-ed。通常如果一个模块不是require-ed，它根本不会被捆绑。这可以用来强制它包含模块，即使它不是 requir-ed 在包本身中。

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 节点等，这可能有助于推迟模块的评估。