Maison > interface Web > js tutoriel > le corps du texte

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

韦小宝
Libérer: 2017-12-15 10:49:08
original
1564 Les gens l'ont consulté

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"
  }
};
Copier après la connexion


exemple.amd.js


require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});
Copier après la connexion


module1.js


console.log("module1");
module.exports = 1;
Copier après la connexion


module2.js


console.log("module2");
module.exports = 2;
Copier après la connexion


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
Copier après la connexion


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"
  }
};
Copier après la connexion


exemple.ensure.js


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


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"
  }
};
Copier après la connexion


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');
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal