[英]webpack require.ensure first parameter use
What is the use of first parameter of webpack require.ensure first parameter? webpack的第一个参数有什么用途require.ensure第一个参数?
https://webpack.github.io/docs/code-splitting.html https://webpack.github.io/docs/code-splitting.html
require.ensure(dependencies, callback)
I tried to let the first parameter filled or empty like: 我尝试让第一个参数填充或清空,如:
require.ensure(['./module'], function() { //filled first param
require.ensure([], function() { //empty first param
let module = require('./module');
$ocLazyLoad.load([{
name: module.default,
}]);
});
Both are working. 两者都有效。 So what is the use of the first parameter?
那么第一个参数的用途是什么?
There is also a require.include
function in the documentation which I do not understand the use case of this function. 文档中还有一个
require.include
函数,我不了解这个函数的用例。 Can anyone explain it too? 任何人都可以解释一下吗?
These functions have to do with Code Splitting , which allows some sections of code to be bundled separate from the main code, and loaded and run later, while the code is running. 这些函数与Code Splitting有关 ,它允许代码的某些部分与主代码分开捆绑,并在代码运行时加载并运行。
require.ensure(['./module'], function() { //filled first param
The first parameter is an array of modules to ensure are loaded before running the callback. 第一个参数是一个模块数组,用于确保在运行回调之前加载。 If
./module
has not been loaded in one of the bundles yet, it will load the chunk this module is contained in a new HTTP request, then call the callback function. 如果尚未在其中一个bundle中加载
./module
,它将加载该模块包含在新HTTP请求中的块,然后调用回调函数。
To use Webpack's example: 要使用Webpack的示例:
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
module-a
and module-b
can now be split into different files, and the callback function will not run until they have loaded. module-a
和module-b
现在可以拆分成不同的文件,并且回调函数在加载之前不会运行。
require.ensure([], function() { //empty first param
let module = require('./module');
$ocLazyLoad.load([{
name: module.default,
}]);
});
Here require.ensure
defines a split point. 这里
require.ensure
定义了一个分裂点。 As it does not have any dependencies in the array, it does not itself load any modules. 由于它在数组中没有任何依赖项,因此它本身不会加载任何模块。 However,
require
statements inside the callback will still be dynamically loaded through the magic of webpack and ./module
will be bundled in a separate file. 但是,回调中的
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.
文档中还有一个require.include函数,我不了解这个函数的用例。 Can anyone explain it too?
任何人都可以解释一下吗?
require.include
can be used to ensure a module is bundled, even if it is not require
-ed. require.include
可以用来确保模块绑定,即使它不require
-ed。 Normally if a module is not require
-ed, it will not be bundled at all. 通常,如果
require
模块,则根本不会捆绑模块。 This can be used to force it to include the module, even it not requir
-ed in the bundle itself. 这可以用来迫使它包括的模块,即使它不
requir
在束本身-ed。
The first parameter is rarely useful. 第一个参数很少有用。 To learn why it is there and causes confusion, please see my another answer .
要了解它为何存在并引起混淆,请参阅我的另一个答案 。
One use case for the first parameter could be to specify all dependencies for clarity and to comply with the spec . 第一个参数的一个用例可能是为了清晰并指定所有依赖关系并符合规范 。 But that's completely optional.
但这完全是可选的。
Consider you have two split points in different parts of an app. 假设您在应用的不同部分有两个分割点。 The first split point depends on module
a
, the second depends on modules a
and b
. 第一个分割点取决于模块
a
,第二个取决于模块a
和b
。 To eliminate the risk of downloading a
twice, you could decide to place both modules into a single chunk: 为了消除下载的风险
a
两次,你可以决定这两个模块放置到一个单一的块:
// First split point
require.ensure(['b'], (require) => {
require('a');
});
Consider the following code splitting scenario: 请考虑以下代码拆分方案:
require.ensure([], (require) => {
...
require.ensure([], (require) => {
require('a');
require('b');
});
require.ensure([], (require) => {
require('a');
require('c');
});
...
});
In this case, module a
will end up in both nested chunks. 在这种情况下,模块
a
将以两个嵌套的块结束。 If at least one of the nested chunks is frequently loaded, you could decide to move a
into the parent chunk: 如果经常加载至少一个嵌套块,则可以决定将
a
移动到父块中:
require.ensure(['a'], (require) => {
...
require.include
require.include
将模块添加到块 Consider the previous example. 考虑前面的例子。 There is another way to pull
a
into the parent chunk: 还有另一种方法可以将
a
拉入父块:
require.ensure([], (require) => {
require.include('a');
...
In this particular example, both solutions are equivalent and there is no advantage in using require.include
. 在这个特定的例子中,两个解决方案都是等价的,使用
require.include
没有任何优势。 However, if you don't have access to the split point's code, parent chunk is an entry chunk or you use the modern import()
syntax, require.include
is your only choice. 但是,如果您无法访问拆分点的代码,则父块是一个条目块,或者您使用现代
import()
语法, require.include
是您唯一的选择。
It is possible to pull modules into chunks using synchronous require
or import
. 可以使用同步
require
或import
将模块拉入块中。 The advantage of require.include
is that it only loads modules and doesn't evaluate them. require.include
的优点是它只加载模块而不评估它们。 This could be useful to defer modules' evaluation if it is expensive or depends on the application state, eg, requires polyfills to be loaded, DOM nodes to be present, etc. 如果模块价格昂贵或取决于应用程序状态,这可能有助于延迟模块的评估,例如,需要加载polyfill,存在DOM节点等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.