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
Abhängigkeiten: Modulabhängigkeitsarray
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])
dependencies: Array abhängiger Module
Callback: Callback-Funktion, beim Aufruf wird ein erforderlicher Parameter übergeben
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
module1bbb
ccc1module2
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!