suchen

Heim  >  Artikel  >  Web-Frontend  >  Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte

Code-Sharing zur Netzwerkoptimierung für Webpack-Projekte

小云云
小云云Original
2018-02-22 13:32:051518Durchsuche

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

JavaScript html webpack 接口 JS github http https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Drag-and-Drop-Sortierkomponente Dragact von ReactNächster Artikel：Ausführliche Erläuterung der Drag-and-Drop-Sortierkomponente Dragact von React

In Verbindung stehende Artikel

Mehr sehen