Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte

Der Prozess der SPA-Anwendung ist:

1. HTML laden

2. Javascript (bundle.js) laden

3. Javascript ausführen und mit der Anforderung der Schnittstelle beginnen

4. Stellen Sie zunächst eine HTTP/HTTPS-Verbindung mit der Schnittstelle her (DNS-Abfrage/TCP-Handshake/TLS-Link)

5. Senden Sie den Anforderungsheader und erhalten Sie die Antwortdaten...

6. 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.

Verwenden Sie <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 :

<!-- dist/index.html -->

  ...
  <link>
  <link>

---

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>>

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!