Detaillierte Erläuterung des Unterschieds zwischen Webpack require.ensure und require AMD_javascript-Kenntnissen

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Webpack dem Unterschied zwischen require.ensure und require AMD vor. Der Herausgeber findet es recht gut und wird auch als Referenz für alle verwendet. Wenn Sie sich für Webpack interessieren, können Sie dem Herausgeber folgen, um einen Blick darauf zu werfen

Einführung

Der Unterschied zwischen require-ensure und require-amd:

require-amd

Beschreibung: Identisch mit der Anforderungsfunktion der AMD-Spezifikation. Bei Verwendung werden ein Modularray und eine Rückruffunktion übergeben Alle Module wurden heruntergeladen und ausgeführt

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

Parameter

1. Abhängigkeiten: Modulabhängigkeitsarray

2. Rückruf: Rückruffunktion

require-ensure

Hinweis: require.ensure lädt abhängige Module nur herunter, wenn sie benötigt werden. Wenn alle durch die Parameter angegebenen Module heruntergeladen wurden (die heruntergeladenen Module wurden noch nicht ausgeführt), wird die durch die angegebene Rückruffunktion ausgeführt

Parameter werden ausgeführt. require.ensure erstellt einen Block, und Sie können den Namen des Blocks angeben. Wenn der Blockname bereits vorhanden ist, werden die abhängigen Module beim Erstellen des Webpacks separat generiert Datei.

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

1. dependencies: Array abhängiger Module

2. Callback: Callback-Funktion, beim Aufruf wird ein erforderlicher Parameter übergeben

3. chunkName: Modulname, der zum Erstellen verwendet wird Verwenden Sie beim Generieren von Dateien

Hinweis: Das requi.ensure-Modul wird nur heruntergeladen und nicht ausgeführt. Erst nachdem die Rückruffunktion require (Modulname) verwendet, wird dieses Modul verwendet wird ausgeführt.

Beispiel

require-amd

Quellcode

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;

Ergebnisse erstellen

Führen Sie webpack --config webpack.config.amd.js über den Befehl aus Zeile
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Ergebnisse ausführen

amd/index.html im Browser ausführen, Konsolenausgabe:

module1
aaa
module2
bbb

require-ensure

Quellcode

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
Das Gleiche wie oben

module2.js
Dasselbe wie oben

Ergebnisse erstellen

Webpack in der Befehlszeile ausführen --config webpack.config .ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Ergebnis ausführen

Führen Sie secure/index.html im Browser aus und die Konsolenausgabe lautet:

aaa
module2
bbb
module1

require-ensure-chunk

Quellcode

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
Gleiches wie oben

module2.js
Gleiches wie oben

Ergebnisse erstellen

Führen Sie webpack --config webpack in der Befehlszeile aus
- module2.js


Ergebnis ausführen

sure/index.html im Browser ausführen, Konsolenausgabe: aaa

bbb

1module2
ddd


Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird, und ich hoffe auch dass jeder die chinesische PHP-Website unterstützen wird.

Verwandte Empfehlungen:

Detaillierte Erläuterung des Vue-On-Demand-Ladekomponenten-Webpacks require.ensure

Detaillierte Erläuterung des Unterschieds zwischen Webpack require.ensure und require AMD

Zusammenfassung des Tutorials zur Front-End-Leistungsoptimierung des Webpack-Lernprogramms

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Webpack require.ensure und require AMD_javascript-Kenntnissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!