Maison > Article > interface Web > Partage de code d'optimisation du réseau pour les projets Webpack
Partage de code d'optimisation du réseau pour les projets Webpack
- 小云云original
- 2018-02-22 13:32:051477parcourir
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(),
]
}
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>
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 %>>
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!