9

webpackrequire.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函数，我不明白这个函数的用例。谁能解释一下？

4

2 回答 2

11

这些功能与代码拆分有关，它允许将某些代码部分与主代码分开捆绑，然后在代码运行时加载和运行。

代码示例 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 在包本身中。

于 2016-04-06T02:11:26.200 回答
0

第一个参数很少有用。要了解它为什么存在并导致混乱，请参阅我的另一个答案。

遵守规范

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

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

假设您在应用程序的不同部分有两个分割点。第一个分割点取决于模块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是它只加载模块而不评估它们。如果它很昂贵或取决于应用程序状态，例如，需要加载 polyfills、存在 DOM 节点等，这对于推迟模块的评估可能很有用。

于 2017-07-04T13:04:37.333 回答