Webpack
webpack wird mit dem Plug-in SplitChunksPlugin ausgeliefert, mit dem Sie
konfigurieren, wie der Bundler JavaScript-Dateien aufteilt. erkennt Webpack sowohl die
dynamische import()- und statische import-Anweisungen. Das Verhalten von
SplitChunksPlugin kann geändert werden, indem die Option chunks in der zugehörigen
Konfiguration:
chunks: async ist der Standardwert und bezieht sich auf dynamische import()-Aufrufe.chunks: initial bezieht sich auf statische import-Aufrufe.chunks: all deckt sowohl dynamische import()- als auch statische Importe ab, sodass Sie
um Blöcke für async- und initial-Importe freizugeben.
Standardmäßig immer dann, wenn Webpack auf eine dynamische import()-Anweisung stößt. sie
einen separaten Chunk für dieses Modul:
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
Die Standard-Webpack-Konfiguration für das vorherige Code-Snippet führt zu zwei
separate Blöcke:
- Dem
main.js-Chunk, der von Webpack als initial-Block klassifiziert wird,
enthält das Modul main.js und ./my-function.js.
- Der Block
async, der nur form-validation.js enthält (mit einem
Datei-Hash im Ressourcennamen, falls konfiguriert. Dieser Block wird nur heruntergeladen
wenn condition wahrheit ist.
Mit dieser Konfiguration können Sie das Laden des Blocks form-validation.js verzögern, bis
tatsächlich benötigt wird. Dies kann die Reaktionsfähigkeit beim Laden verbessern, indem das Script
Bewertungszeit beim ersten Seitenaufbau an. Skriptdownload und -auswertung
für den Block form-validation.js tritt auf, wenn eine bestimmte Bedingung erfüllt ist, in
In diesem Fall wird das dynamisch
importierte Modul heruntergeladen. Ein Beispiel könnte ein
wenn ein Polyfill nur für einen bestimmten Browser heruntergeladen wird.
aus dem vorherigen Beispiel: Das importierte Modul ist für eine Nutzerinteraktion erforderlich.
Wenn Sie jedoch die SplitChunksPlugin-Konfiguration ändern, um
Mit chunks: initial wird sichergestellt, dass der Code nur auf die ersten Blöcke aufgeteilt wird. Dies sind
Blöcke wie statisch importierte oder in der Datei entry des Webpacks aufgelistete Blöcke
. Im vorherigen Beispiel wäre der resultierende Chunk ein
Kombination aus form-validation.js und main.js in einer Skriptdatei
Dies kann die Leistung beim ersten Seitenaufbau verschlechtern.
Die Optionen für SplitChunksPlugin können auch so konfiguriert werden, dass größere
Skripts in mehrere kleinere aufteilen, z. B. mit der Option maxSize
, um Webpack anzuweisen, Blöcke in separate Dateien aufzuteilen, wenn diese die
angegeben durch maxSize. Das Unterteilen großer Skriptdateien in kleinere Dateien
Verbessern der Lastenreaktion, z. B. in einigen Fällen CPU-intensiver Skriptauswertung
in kleinere Aufgaben aufgeteilt ist, bei denen die Hauptaufgabe
für längere Zeit verwenden.
Größere JavaScript-Dateien bedeuten auch, dass Skripts
ist die Wahrscheinlichkeit
einer Cache-Entwertung höher. Wenn Sie zum Beispiel eine
das Framework und eigenen Anwendungscode enthält,
Das Bundle kann ungültig werden, wenn nur das Framework aktualisiert wird, aber nichts anderes in
der gebündelten Ressource.
Andererseits erhöhen kleinere Skriptdateien die Wahrscheinlichkeit,
ruft der Besucher Ressourcen aus dem Cache ab, was zu einem schnelleren Laden der Seiten auf
wiederholte Besuche. Kleinere Dateien profitieren jedoch weniger von der Komprimierung als größere
und kann die Netzwerk-Umlaufzeit beim Laden von Seiten mit einer
Browser-Cache. Es ist wichtig, ein Gleichgewicht zwischen dem Caching
Effizienz, Komprimierung und die Zeit der Skriptauswertung.
Achtung:Wenn Sie
SplitChunksPlugin deaktivieren
Durch Angabe von
splitChunks: false im Webpack Ihrer Anwendung
wird
./my-function.js in die Konfiguration eingebunden,
sowohl main.js als auch
form-validation.js.
Webpack-Demo
Hinweis:Da in dieser Demo ein Bundler verwendet wird, ist eine Glitch-Demo
nicht eingebettet werden kann. Klonen Sie zum Ausführen das folgende GitHub-Repository in
und folgen Sie der Anleitung in der
README
Webpack SplitChunksPlugin-Demo
Wissen testen
Der Typ der import-Anweisung, die beim Ausführen von Code verwendet wird
Aufteilung?
Dynamische import().
Richtig!
Statisches import.
Bitte versuchen Sie es noch einmal.
Welche Art von import-Anweisung muss sich ganz oben befinden
eines JavaScript-Moduls und an keiner anderen Stelle?
Dynamische import().
Bitte versuchen Sie es noch einmal.
Statisches import.
Richtig!
Was ist bei der Verwendung von SplitChunksPlugin in Webpack
zwischen einem async-Chunk und einem
Block initial?
async Blöcke werden mit dem dynamischen import() geladen
und initial-Blöcke werden mithilfe einer statischen
import.
Richtig!
async Chunks werden mit dem statischen import geladen
und initial-Blöcke werden mit dynamischen
import().
Bitte versuchen Sie es noch einmal.
Nächster Schritt: Lazy Loading von Bildern und
