webpack require.ensure第一个参数使用

Soo*_*Koh 8 javascript commonjs webpack code-splitting oclazyload

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

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

require.ensure(dependencies, callback)
Run Code Online (Sandbox Code Playgroud)

我尝试让第一个参数填充或清空,如:

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

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

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

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

Ale*_*ara 9

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

代码示例1:

require.ensure(['./module'], function() {  //filled first param
Run Code Online (Sandbox Code Playgroud)

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

要使用Webpack的示例:

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

module-amodule-b现在可以分割成不同的文件,回调函数将不会运行,直到他们已经加载.

代码示例2:

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

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

require.include

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

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

  • 很好的问题/答案,webpack 的这个领域很快就会变得混乱。如果 require.ensure 不执行任何操作,**代码示例 2** 的意义何在?我们通过删除它并要求文件顶部的模块会得到相同的结果吗?我看到这种模式与react-router一起用于异步路由[此处](https://github.com/reactjs/react-router/blob/master/examples/huge-apps/routes/Grades/index.js)。为什么react-router示例没有列出它们将要异步加载的模块依赖项? (2认同)