Partage de code d'optimisation du réseau pour les projets Webpack-js tutoriel-php.cn

Partage de code d'optimisation du réseau pour les projets Webpack

小云云

Libérer： 2018-02-22 13:32:05

original

1530 Les gens l'ont consulté

Le processus de candidature au SPA est :

Chargement du HTML
Chargement du javascript (bundle.js)
Exécutez javascript et commencez à demander l'interface
Établissez d'abord une connexion HTTP/HTTPS avec l'interface (requête DNS/prise de contact TCP/lien TLS)
Envoyer l'en-tête de la requête et obtenir les données de réponse...
Rendre les données et les présenter à l'utilisateur

Nous utilisons Vue/React + Webpack. Le js packagé fait souvent plus de 300 Ko, et l'étape 2 prendra un certain temps. Si vous exécutez l'Étape 4 simultanément pour établir une connexion pendant que l'Étape 2 est en cours, vous pouvez gagner un peu de temps.
Surtout côté mobile, l'établissement d'une connexion prend une grande partie du temps, vous pouvez donc gagner du temps.

Utilisez `<link rel="preconnect">` pour laisser le navigateur pré-établir la connexion.

La plupart des navigateurs grand public prennent déjà en charge : https://caniuse.com/#feat=link-rel-preconnect

Création d'un simple plug-in webpack : 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(),
  ]
}

Copier après la connexion

Ce que fait ce plug-in est très simple, il s'insère dans <head> :

<!-- dist/index.html -->
<head>
  ...
  <link rel="preconnect" href="http://api1.example.com">
  <link rel="preconnect" href="http://api2.example.com">
</head>

Copier après la connexion

J'ai utilisé avant L'implémentation du modèle de HtmlWebpackPlugin est un peu lourde, elle a donc été extraite dans un plug-in.

<!-- template.html -->
<link rel="preconnect" href=<%= htmlWebpackPlugin.options.api1_origin %>>

Copier après la connexion

Recommandations associées :

Explication détaillée du module Webpack et des nouvelles fonctionnalités de webpack3

Explication détaillée du côté serveur Webpack Exemples d'empaquetage de code

Webpack, vue, node réalisent le partage de code sur une seule page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Partage de code d'optimisation du réseau pour les projets Webpack

Utilisez <link rel="preconnect"> pour laisser le navigateur pré-établir la connexion.

Utilisez `<link rel="preconnect">` pour laisser le navigateur pré-établir la connexion.