Webpack-Optimierungsstrategie

Wenn wir eine Single-Page-Anwendung (Vue, React) erstellen oder ein Plug-In packen, besteht eine hohe Wahrscheinlichkeit, dass wir Webpack verwenden, ein JavaScript-Paketierungstool.
Aber mit zunehmendem Projektcode werden einige Einfache Webpack-Konfigurationen weisen verschiedene Nachteile auf (lange Verpackungszeit, großer Code). Das Folgende ist eine Zusammenfassung der Problemlösung basierend auf dem Prozess der Selbstentwicklung und des Erlernens von Webpack 🎜>
DllPlugin

Viele Jeder weiß, dass

webpack.optimize.CommonsChunkPlugin

zum Extrahieren öffentlicher Bibliotheken verwendet wird, aber dieses Plug-in kann das Problem nicht lösen Allerdings DllPlugin
Dieses Plug-in kann das Problem lösen.Dieses Plug-in verpackt zuerst die öffentliche Bibliothek. Es verfügt über eine eigene unabhängige Webpack-Konfigurationsdatei, und der Eingang zur Konfigurationsdatei ist die öffentliche Bibliothek, die gepackt werden muss.Wenn es gepackt ist, wird das öffentliche JS-Paket generiert und
manifest.json

.manifest.json
wird verwendet, um die Hauptkonfigurationsdatei DLLReferencePlugin zuzuordnen Verwandte Abhängigkeiten devtool cheap-module-eval-source-mapWenn wir Webpack zum Verpacken des Codes verwenden, wird dieser kompiliert, sodass das Debuggen schwierig wird.

So gibt Webpack die Devtool-API, die über Source Map den korrekten Ort des Fehlers findet.

Wählen Sie devtool

cheap-module-eval-source-map

Der Grund dafür ist, dass jedes Modul verwendet eval() verbessert die Effizienz der kontinuierlichen Konstruktion erheblich und generiert keine Spaltenzuordnung, um Konstruktionszeit zu sparen (die Browser-Engine gibt automatisch Spalteninformationen aus).LeistungsoptimierungStiltrennung und -komprimierung

Verwenden Sie

extract-text-webpack-plugin

, um die Stile in jedem Skript zu extrahieren.Wenn Sie allChunks festlegen: true
, die extrahierten Stile werden in einer Datei zusammengeführt.Verwenden Sie optimize-css-assets-webpack-plugin
Komprimieren Sie Stile.Komprimierung von SkriptenVerwenden Sie

uglifyjs-webpack-plugin

Komprimieren Sie das Skript.JS-LeistungsoptimierungJedes Modul von webpack wird in eine Abschlussfunktion eingefügt.

Verwenden Sie

webpack.optimize.

fügt die zugehörigen Module in einen Abschluss ein.Dadurch wird die Anzahl der Abschlüsse reduziert.Gemeinsamen Code extrahieren
Verwenden Sie

DllPlugin

oder webpack.optimize.CommonsChunkPlugin, um den gemeinsamen Code zu extrahieren Code und packen Sie ihn in andere Dateien. Vermeiden Sie wiederholtes Packen, wodurch die Anzahl der Pakete verringert wird.Server-Vorkomprimierung
Wenn der Dienst die Vorkomprimierung aktiviert.

gibt dem Dateinamen mit der Endung

.gz

Priorität. Diese Datei ist eine komprimierte Datei und daher klein.Verwenden SieCompressionWebpackPlugin
generiert die entsprechende komprimierte Datei.Verwandte Empfehlungen:

Reagieren, Webpack, Cross-Domain-Proxy, mehrseitig

Vue+Webpack-Grundkonfigurationsfreigabe

Netzwerkoptimierung des Webpack-Projekts Codefreigabe

Das obige ist der detaillierte Inhalt vonWebpack-Optimierungsstrategie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!