简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
1513 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：
web webpack 代码
source：php.cn
Article précédent：Explication détaillée du composant de tri par glisser-déposer de React Dragact Article suivant：Explication détaillée du système de gestion de contenu de blog
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
Derniers articles par auteur
Derniers numéros
Une erreur est générée lors de l'importation du constructeur de prototype Javascript dans une application angulaire J'ai une application Angular dans laquelle j'essaie d'importer un fichier JS doté d'un con...
Depuis 2024-04-04 11:36:15
0
1
288
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！