Heim > Artikel > Web-Frontend > Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte
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
// $ npm install html-webpack-preconnect-plugin --save-dev var HtmlWebpackPreconnectPlugin = require('html-webpack-preconnect-plugin'); // webpack config { ... plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // set the preconnect origins preconnect: [ 'http://api1.example.com', 'http://api2.example.com', ] }), // enabled preconnect plugin new HtmlWebpackPreconnectPlugin(), ] }
Was dieses Plug-in macht, ist sehr einfach, es wird eingefügt in <head>
:
<!-- dist/index.html --> <head> ... <link rel="preconnect" href="http://api1.example.com"> <link rel="preconnect" href="http://api2.example.com"> </head>
Ich habe es verwendet es vorher Die Vorlagenimplementierung von HtmlWebpackPlugin
ist etwas umständlich und wurde daher in ein Plug-In extrahiert.
<!-- template.html --> <link rel="preconnect" href=<%= htmlWebpackPlugin.options.api1_origin %>>
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!