Webpack require.ensure use the first parameter

Question

What is the first webpack require.ensure first parameter for?

https://webpack.imtqy.com/docs/code-splitting.html

require.ensure(dependencies, callback) 

I tried to let the first parameter be filled or empty:

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

Both work. So what is the use of the first parameter?

The documentation also has a require.include function, which I do not understand when using this function. Can anyone explain this?

Answer 1

These functions are associated with the "Code separation" , which allows you to insert some sections of the code separately from the main code, load and run later, while the code is running.

Code Example 1:

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

The first parameter is an array of modules to provide loading before starting the callback. If ./module is not yet loaded into one of the packages, it will load the piece that this module contains in the new HTTP request, then call the callback function.

To use the Webpack example:

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

module-a and module-b can now be divided into different files, and the callback function will not work until they load.

Code Example 2:

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

Here require.ensure defines the split point. Since it does not have any dependencies in the array, it itself does not load any modules. However, the require statements inside the callback will still be dynamically loaded using the magic of the web package, and the ./module will be added to a separate file.

require.include

The documentation also has a require.include function, in which I do not understand the use case for this function. Can anyone explain this?

require.include can be used to provide a module connection, even if it is not require -ed. Usually, if the module is not require -ed, it will not be bound at all. This can be used to make it enable the module, not even requir -ed in the package itself.

Answer 2

The first parameter is rarely used. To find out why it exists and is causing confusion, see My other answer.

Follow specification

One use case for the first parameter may be to specify all the dependencies for clarity and match the spec . But this is completely optional.

Add modules to pieces to make pieces look like

You have two split points in different parts of the application. The first separation point depends on the module a , the second depends on the modules a and b . To eliminate the risk of loading a twice, you can decide to place both modules in one piece:

 // First split point require.ensure(['b'], (require) => { require('a'); }); 

Pull modules into original pieces

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, the module a will appear in both nested pieces. If at least one of the nested chunks is often loaded, you can move a to the parent chunk:

 require.ensure(['a'], (require) => { ... 

Add modules to pieces using require.include

Consider the previous example. Another way to pull a into the parent piece:

 require.ensure([], (require) => { require.include('a'); ... 

In this specific example, both solutions are equivalent, and there is no benefit when using require.include . However, if you do not have access to the code with a separating point, the parent chunk is an input fragment, or you use the modern import() syntax, your choice is require.include .

You can pull modules into pieces using synchronous require or import . The advantage of require.include is that it only loads modules and does not evaluate them. This can be useful for delaying the evaluation of modules if it is expensive or depends on the state of the application, for example, requires loading polyfill, DOM nodes, etc.