Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-02-22 13:32:05
original
1536 Les gens l'ont consulté

Le processus de candidature au SPA est :

  1. Chargement du HTML

  2. Chargement du javascript (bundle.js)

  3. Exécutez javascript et commencez à demander l'interface

  4. Établissez d'abord une connexion HTTP/HTTPS avec l'interface (requête DNS/prise de contact TCP/lien TLS)

  5. Envoyer l'en-tête de la requête et obtenir les données de réponse...

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal