Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte-js-Tutorial-php.cn

Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte

小云云

Freigeben： 2018-02-22 13:32:05

Original

1562 Leute haben es durchsucht

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.

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(),
  ]
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!