Implementierung der Webpack-Codefragmentierung

Hintergrund

Einer der wichtigsten Punkte beim Erstellen leistungsstarker Anwendungen besteht darin, Benutzern das Laden von möglichst nur den jeweils erforderlichen Ressourcen zu ermöglichen. Ressourcen, die keine zu hohe Priorität haben, sollten mithilfe von Technologien wie verzögertem Laden schrittweise abgerufen werden, um die Geschwindigkeit der ersten Bildschirmanzeige der Seite sicherzustellen. Code-Sharding ist eine Technologie, die nur im Verpackungstool webpck zum Einsatz kommt. Mit dieser Funktion kann der Code in bestimmte Formen aufgeteilt werden, sodass Benutzer ihn nicht vollständig auf einmal laden müssen, sondern bei Bedarf laden können.

CommonsChunkPlugin

Obwohl dieses Plug-In in webpack4 nicht mehr empfohlen wird, müssen wir es dennoch verstehen. Dieses Plug-in kann die gemeinsamen Teile aus mehreren Chunks extrahieren. Die Extraktion gemeinsamer Module kann für mehrere Projekte mehrere Vorteile mit sich bringen:

• Der Entwicklungsprozess reduziert die wiederholte Modulverpackung, was die Entwicklungsgeschwindigkeit verbessern kann;
• Reduzieren Sie die Gesamtressourcengröße.
• Durch ordnungsgemäß segmentierten Code kann der Client-Cache effektiver genutzt werden.

Die Standardregel dieses Plugins ist, dass ein Modul extrahiert wird, solange es von zwei Eintragsblöcken verwendet wird. Beispielsweise wird React extrahiert, solange a und b React verwenden. Es weist jedoch noch einige Mängel auf:

• Ein CommonChunkPlugin kann nur einen Anbieter extrahieren. Wenn wir mehrere Anbieter extrahieren möchten, müssen wir mehrere Plugins konfigurieren, was eine Menge doppelten Konfigurationscode hinzufügt.
• Das zuvor erwähnte Mainfest führt tatsächlich dazu, dass der Browser eine weitere Ressource lädt, was sich nicht positiv auf die Seiten-Rendering-Geschwindigkeit auswirkt.
• Aufgrund einiger interner Designfehler zerstört CommonChunkPlugin beim Extrahieren gemeinsamer Module die Abhängigkeiten von Modulen im ursprünglichen Chunk, was die Durchführung weiterer Optimierungen erschwert.

geteilte Chunks

Dies ist eine neue Funktion von Webpack, die die Codesegmentierungsfunktion von CommonChunkPlugin verbessert und neu gestaltet und implementiert. Es ist nicht nur leistungsfähiger als CommonChunkPlugin, sondern auch einfacher und benutzerfreundlicher. Der Code lautet wie folgt

modul.exporte = {
    Eintrag: './foo.js',
    Ausgabe: {
        Dateiname: „foo.js“,
        öffentlicher Pfad: „/dist/“
    },
    Modus: "Entwicklung",
    Optimierung:
        geteilte Chunks: {
            Brocken: "alle",
        }
    }
}

// foo.js
importiere React von „react“;
importiere('./bar.js');
: Dokument.Schreiben('foo.js', React.version);

//bar.js
importiere React von „React“;
Konsole.log('bar.js', React.version);

Die Standardextraktionsbedingungen von splitChunk sind:

• Die extrahierten Chunks können freigegeben werden oder aus dem Verzeichnis node_modules stammen. Dies ist leicht zu verstehen. Module, auf die mehrfach verwiesen wird oder die sich in node_modules befinden, sind in der Regel allgemeine Module und eignen sich besser für die Extraktion.
• Der extrahierte JS-Block hat eine entsprechende Größe, beispielsweise größer als 30 KB. Wenn die Größe des CSS-Blocks größer als 50 KB ist, ist dies auch relativ leicht zu verstehen. Wenn die Größe der extrahierten Ressource zu klein ist, ist der Optimierungseffekt durchschnittlich.
• Beim On-Demand-Ladevorgang ist die maximale Anzahl parallel angeforderter Ressourcen kleiner oder gleich 5. Beim On-Demand-Laden werden Skripte durch dynamisches Einfügen von Skript-Tags geladen. Wir möchten im Allgemeinen nicht zu viele Ressourcen gleichzeitig laden, da bei jeder Anforderung Kosten für das Herstellen und Freigeben der Verbindung anfallen. Daher werden die Extraktionsregeln nur wirksam, wenn nicht viele parallele Anforderungen vorliegen.
• Beim ersten Laden ist die maximale Anzahl parallel angeforderter Ressourcen kleiner oder gleich 3. Dies ähnelt dem vorherigen Punkt, mit der Ausnahme, dass die Leistungsanforderungen beim ersten Laden der Seite häufig höher sind, sodass der Standardschwellenwert hier auch niedriger ist.

Konfiguration

geteilter Chunk: {
    Brocken: ‚asynchron‘,
    min.Größe: {
        JavaScript: 30000,
        Stil: 50000,
    },
    maxGröße: 0,
    minChunks: 1,
    Anzahl der Anfragen: 5,
    maxInitialRequests: 3,
    automatischerNameDelimiter: '~',
    Name: wahr,
    CacheGruppen:
        Verkäufer:
            Test: /[\\/]node_modules[\\/]/,
            Priorität: -10,
        },
        Standard: {
            minChunks: 2,
            Priorität: -20,
            reuseExistingChunk: true
        }
    }
}

Passendes Muster
Es gibt drei Werte für Chunks: async (Standard), initial und all. „async“ extrahiert nur asynchrone Blöcke, „initial“ funktioniert nur mit dem Einstiegsblock und „all“ aktiviert beide Modi gleichzeitig (empfohlen)

Übereinstimmungsbedingungen
min. Größe, min. Chunks, max. asynchrone Anfragen, max. anfängliche Anfragen

Name
Der Standardwert ist „true“, was bedeutet, dass die neu generierten Chunks automatisch entsprechend den Cache-Gruppen und dem Umfang benannt und durch „automaticNameDelimiter“ getrennt werden können.

Cache-Gruppe
Es kann als Regel zum Trennen von Blöcken verstanden werden. Standardmäßig gibt es zwei Regeln: Anbieter und Standard. Anbieter
Es wird verwendet, um alle qualifizierten Module in node_modules zu extrahieren, und der Standardwert wird für Module verwendet, auf die mehrfach verwiesen wird. Sie können diese Regeln hinzufügen oder ändern. Wenn Sie eine Regel deaktivieren möchten, können Sie sie auch auf „false“ setzen. Wenn ein Modul gleichzeitig mehreren Cache-Gruppen entspricht, wird das Prioritätskonfigurationselement verwendet, um die Priorität zu bestimmen.

Asynchrones Laden von Ressourcen

Das Hauptproblem, das durch das asynchrone Laden von Ressourcen gelöst wird, besteht darin, dass bei zu vielen Modulen und zu großer Ressourcengröße das Laden einiger vorübergehend nicht verwendeter Module verzögert werden kann. Auf diese Weise werden beim ersten Rendern der Seite möglichst wenige Ressourcen vom Benutzer heruntergeladen, und das Laden nachfolgender Module wird bei Bedarf ausgelöst. Dies wird im Allgemeinen als Laden bei Bedarf bezeichnet.
Es gibt zwei asynchrone Lademethoden in Webpack: Import (beginnend mit Webpack2) und require.ensure (Webpack1). Der Unterschied zwischen Import und dem ES6-Modul besteht darin, dass es kein Laden auf oberster Ebene erfordert und geladen werden kann, sobald es verwendet wird. Da es sich nur um einen einfachen Funktionsaufruf handelt, erfolgt hier keine weitere Erläuterung.

Zusammenfassen

Es gibt mehrere Möglichkeiten, Code aufzuteilen – CommonChunkPlugin oder SplitChunks sowie asynchrones Laden von Ressourcen. Mithilfe dieser Methoden lässt sich die Ressourcengröße effektiv reduzieren und gleichzeitig der Cache besser nutzen, um den Benutzern ein benutzerfreundlicheres Erlebnis zu bieten.

Dies ist das Ende dieses Artikels über die Implementierung von Webpack-Code-Slicing. Weitere relevante Inhalte zum Thema Webpack-Code-Slicing finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!