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`

There is also a require.include function in the documentation which I do not understand the use case of this function. Can anyone explain it too?

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

Answer 2

第一个参数很少有用。要了解它为何存在并引起混淆，请参阅我的另一个 .

遵守规范

第一个参数的一个用例可能是为了清楚起见指定所有依赖项并遵守 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 个节点存在，等等。

webpack require.ensure 第一个参数使用

webpack require.ensure first parameter use

javascript

webpack

commonjs

oclazyload

code-splitting

代码示例 1：

代码示例 2：

`require.include`

遵守规范

向块中添加模块以使块相似

将模块拉入父块

使用 `require.include`

webpack require.ensure 第一个参数使用

webpack require.ensure first parameter use

javascript

webpack

commonjs

oclazyload

code-splitting

代码示例 1：

代码示例 2：

require.include

遵守规范

向块中添加模块以使块相似

将模块拉入父块

使用 require.include

`require.include`

使用 `require.include`