webpack require.ensure first parameter use

Question

What is the use of first parameter of webpack require.ensure first parameter?

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. Can anyone explain it too?

Answer 1

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 Sample 1:

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.

To use Webpack's example:

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.

Code Sample 2:

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

Here require.ensure defines a split point. 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.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 can be used to ensure a module is bundled, even if it is not require-ed. Normally if a module is not require-ed, it will not be bundled at all. This can be used to force it to include the module, even it not requir-ed in the bundle itself.