Der Prozess der SPA-Anwendung ist:
HTML laden
Javascript (bundle.js) laden
Javascript ausführen und mit der Anforderung der Schnittstelle beginnen
Stellen Sie zunächst eine HTTP/HTTPS-Verbindung mit der Schnittstelle her (DNS-Abfrage/TCP-Handshake/TLS-Link)
Senden Sie den Anforderungsheader und erhalten Sie die Antwortdaten...
Rendern Sie die Daten und präsentieren Sie sie dem Benutzer
Wir verwenden Vue/React + Webpack. Die gepackten js sind oft mehr als 300 KB groß und Schritt 2 wird eine Weile dauern. Wenn Sie Schritt 4 gleichzeitig ausführen, um eine Verbindung herzustellen, während Schritt 2 ausgeführt wird, können Sie etwas Zeit sparen.
Besonders auf der mobilen Seite nimmt der Verbindungsaufbau einen großen Teil der Zeit in Anspruch, sodass Sie Zeit sparen können.
<link rel="preconnect">
, damit der Browser die Verbindung vorab aufbaut. Die meisten Mainstream-Browser unterstützen bereits: https://caniuse.com/#feat=link-rel-preconnect
Ein einfaches Webpack-Plug-in erstellt: https://github.com / joaner/html-webpack-preconnect-plugin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Was dieses Plug-in macht, ist sehr einfach, es wird eingefügt in <head>
:
1 2 3 4 5 6 |
|
Ich habe es verwendet es vorher Die Vorlagenimplementierung von HtmlWebpackPlugin
ist etwas umständlich und wurde daher in ein Plug-In extrahiert.
1 2 |
|
Verwandte Empfehlungen:
Detaillierte Erläuterung des Webpack-Moduls und der neuen Funktionen von webpack3
Detaillierte Erläuterung des Webpack-Servers Code-Paketierungsbeispiele
Webpack, Vue, Node realisieren die gemeinsame Nutzung von Einzelseitencode
Das obige ist der detaillierte Inhalt vonCode-Sharing zur Netzwerkoptimierung für Webpack-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!