Explication détaillée de la différence entre webpack require.ensure et require les compétences AMD_javascript

Cet article présente principalement l'explication détaillée du webpack la différence entre require.ensure et require AMD. L'éditeur pense que c'est assez bon et servira également de référence pour tout le monde. Si vous êtes intéressé par webpack, vous pouvez suivre l'éditeur pour y jeter un œil

Introduction

La différence entre require-ensure et require-amd :

require-amd

Description : identique à la fonction require de la spécification AMD. Lorsqu'elle est utilisée, un tableau de modules et une fonction de rappel sont transmis. La fonction de rappel est exécutée après. tous les modules ont été téléchargés et exécutés

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

Paramètres

1. dépendances : tableau de dépendances du module

2. rappel : fonction de rappel

exiger-assurer

Remarque : require.ensure ne télécharge les modules dépendants qu'en cas de besoin. Lorsque tous les modules spécifiés par les paramètres sont téléchargés (les modules téléchargés n'ont pas encore été exécutés), la fonction de rappel spécifiée par le.

les paramètres seront exécutés. require.ensure créera un morceau et vous pourrez spécifier le nom du morceau si le nom du morceau existe déjà, les modules dépendants seront fusionnés dans le morceau existant. Enfin, ce morceau sera généré séparément lors de la construction d'un webpack. déposer.

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

1. dépendances : Tableau de modules dépendants

2. callback : fonction de rappel, un paramètre require sera transmis lors de l'appel

3. chunkName : nom du module, utilisé pour la construction. Lors de la génération de fichiers, utilisez

Remarque : le module requi.ensure ne sera téléchargé et ne sera pas exécuté seulement après que la fonction de rappel utilise require (nom du module), ce module. sera exécuté.

Exemple

require-amd

Code source

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"
  }
};

exemple.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;

Résultats de construction

Exécutez webpack --config webpack.config.amd.js à partir de la commande ligne
- main.bundle.js
- exemple.amd.js
- 1.chunk.js
- module1.js
- module2.js

Résultats d'exécution

Exécutez amd/index.html dans le navigateur, sortie de la console :

module1
aaa
module2
bbb

exiger-assurer

Code source

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"
  }
};

exemple.ensure.js

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

module1.js
Idem que ci-dessus

module2.js
Identique à ci-dessus

Résultats de construction

Exécutez webpack dans la ligne de commande --config webpack.config .ensure.js
- main.bundle.js
- exemple.amd.js
- 1.chunk.js
- module1.js
- module2.js

Exécuter le résultat

Exécutez Ensure/index.html dans le navigateur et la sortie de la console :

aaa
module2
bbb
module1

require-ensure-chunk

Code source

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"
  }
};

exemple.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
Identique à ci-dessus

module2.js
Identique à ci-dessus

Résultats de construction

Exécutez webpack --config webpack dans la ligne de commande. config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Exécuter le résultat

Exécuter Ensure/index.html dans le navigateur, sortie de la console :

aaa
module1
bbb
ccc
1module2
ddd

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère aussi. que tout le monde soutiendra le site Web PHP chinois.

Recommandations associées :

Explication détaillée du composant de chargement à la demande de vue webpack require.ensure

Explication détaillée de la différence entre webpack require.ensure et require AMD

Résumé de l'optimisation des performances frontales du didacticiel d'apprentissage du webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!