Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skills

This article mainly introduces the detailed explanationwebpack The difference between require.ensure and require AMD. The editor thinks it is quite good and will also be used as a reference for everyone. If you are interested in webpack, you can follow the editor to take a look.

Introduction

The difference between require-ensure and require-amd:

require-amd

Description: Same as the require function of AMD specification. When used, a module array and callback function are passed. The callback function is executed only after the modules have been downloaded and executed.

Syntax: require(dependencies: String[], [callback: function(...)])

Parameters

1. dependencies: module dependency array

2. ##callback: callback function

require-ensure

Note: require.ensure only downloads dependent modules when needed. When all the modules specified by the parameters are downloaded (the downloaded modules have not been executed yet), the callback function specified by the

parameters will be executed. . require.ensure will create a chunk, and you can specify the name of the chunk. If the chunk name already exists, the dependent modules will be merged into the existing chunk. Finally, this chunk will be generated separately when webpack is built. a file.

Syntax: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

1. dependencies: Array of dependent modules

2. callback: callback function, a require parameter will be passed when the function is called

3. chunkName: module name, used for building When generating files, use

. Note: the requi.ensure module will only be downloaded and will not be executed. Only after the callback function uses require (module name), this The module will be executed.

Example

require-amd

Source code

webpack.config.amd .js

var path = require("path");
module.exports = {
  entry: "./example.amd.js",
  output: {
    path: path.join(__dirname, "amd"),
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  }
};

example.amd.js

require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});

module1.js

console.log("module1");
module.exports = 1;

module2.js

console.log("module2");
module.exports = 2;

Build result

Run webpack in the command line --config webpack.config.amd.js

- main.bundle. js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Run result

Run amd/index.html in the browser, the console output:

module1
aaa
module2
bbb

require-ensure

Source code

webpack.config.ensure.js

var path = require("path");
module.exports = {
  entry: "./example.ensure.js",
  output: {
    path: path.join(__dirname, "ensure"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensure .js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
  require("./module1");
}, 'test');

##module1.js

Same as above

module2.js

Same as above

Build results

Run webpack in the command line --config webpack.config.ensure.js

- main.bundle.js

- example. amd.js
- 1.chunk.js
- module1.js
- module2.js

Run result

Run in browser ensure/index.html, console output:

aaa

module2

bbb
module1


##require-ensure-chunk

Source code

webpack.config.ensure.chunk.js

##

var path = require("path");
module.exports = {
  entry: "./example.ensur.chunk.js",
  output: {
    path: path.join(__dirname, "ensure-chunk"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensur .chunk.js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  require("./module1");
  console.log("bbb");
}, 'common');

require.ensure(["./module2"], function(require) {
  console.log("ccc");
  require("./module2");
  console.log("ddd");
}, 'common');

module1.js

Same as above

module2.js

Same as above

Build results

Run webpack in the command line --config webpack.config.ensure.js - main.bundle.js - example.amd.js

- 1.chunk.js

- module1.js
- module2.js


Running result

Browser Run ensure/index.html in, the console output: aaa

module1

bbb

ccc

1module2
ddd


The above is I hope that the entire content of this article will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Detailed explanation of vue loading components on demand webpack require.ensure

Detailed explanation of the difference between webpack require.ensure and require AMD

Webpack learning tutorial front-end performance optimization summary

The above is the detailed content of Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skills. For more information, please follow other related articles on the PHP Chinese website!