Optimisation du chargement du premier écran SPA dans Vue (tutoriel détaillé)-js tutoriel-php.cn

Optimisation du chargement du premier écran SPA dans Vue (tutoriel détaillé)

亚连

Libérer： 2018-06-20 15:59:07

original

2460 Les gens l'ont consulté

Cet article présente principalement la pratique de l'optimisation du chargement du premier écran de Vue SPA. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Écrit devant

Cet article enregistre quelques pièges et solutions d'optimisation que l'auteur a rencontrés lors du premier processus d'optimisation du chargement d'écran du Projet Vue SPA !

Nous prenons l'outil vue-cli comme exemple, utilisons vue-router pour créer une application SPA, choisissons element-ui comme cadre d'interface utilisateur, choisissons axios comme solution ajax, introduisons vuex et utilisons vuex -router-sync pour synchroniser le routeur avec le magasin, le serveur utilise le service Nginx local.

Construire le projet

vue-init webpack vue-spa-starter-kit
cd vue-spa-starter-kit
npm install
npm install vuex element-ui axios -S
npm run dev

Copier après la connexion

vue-cli ouvrira automatiquement le navigateur et vous pourrez voir l'effet. Nous introduisons vue-router, element-ui, axios

// src/main.js
import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Copier après la connexion

dans le fichier d'entrée. Ensuite, nous n'apportons aucune modification et utilisons la configuration par défaut pour l'empaquetage. Nginx utilise la configuration par défaut et se déploie sur Nginx. , et démarre Nginx Service, vérifiez l'effet :

On peut voir que supplier.js a 788 Ko sans développer de pages ni de fonctions. Si nous nous appuyons sur d'autres bibliothèques, telles que echarts, etc., supplier.js peut atteindre plus de 1 M.

Utiliser les ressources CDN

Nous devons séparer vue, vue-router, vuex et element-ui de supplier.js et les importer à l'aide des ressources CDN. Il est recommandé d'utiliser BootCDN pour les services CDN nationaux. Ce n’est pas très utile à l’étranger. . .

Ajoutez d'abord le contenu suivant au fichier modèle index.html :

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

Copier après la connexion

Modifiez build/webpack.base.conf.js. Veuillez vous référer aux informations pertinentes pour l'élément de configuration externe.

module.exports = {
 ...
 externals: {
  &#39;vue&#39;: &#39;Vue&#39;,
  &#39;vuex&#39;: &#39;Vuex&#39;,
  &#39;vue-router&#39;: &#39;VueRouter&#39;,
  &#39;element-ui&#39;: &#39;ElementUI&#39;
 }
 ...
}

Copier après la connexion

Modifier src/router/index.js

// import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
// 注释掉
// Vue.use(VueRouter)
...

Copier après la connexion

Modifier src/store/index.js

...
// 注释掉
// Vue.use(Vuex)
...

Copier après la connexion

Modifier src/main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ELEMENT from &#39;element-ui&#39;
// import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Copier après la connexion

Attention ! Ici, le nom de la variable element-ui doit utiliser ELEMENT, car le nom du module umd de element-ui est ELEMENT

Emballez-le à nouveau et déployez-le sur le service Nginx. Vous pouvez voir :

<. 🎜>

vendor.js est réduit à 112ko, soit une augmentation de 85,5% !

En regardant à nouveau les ressources CDN :

On constate que les 5 requêtes totalisent 216 Ko et ont pris 619 ms !

Nginx active gzip

Nous avons optimisé supplier.js, et ensuite nous optimisons les ressources sur le serveur. Regardez d'abord l'effet de ne pas activer gzip :

Vous pouvez voir qu'il y a 13,5 Ko

Nginx active gzip, modifiez le fichier de configuration nginx nginx.conf :

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 压缩级别
  # 要压缩的mine类型
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

Copier après la connexion

À propos de nginx gzip, veuillez vérifier vous-même les informations pertinentes

Redémarrez le service nginx et voyez l'effet :

Vous pouvez le voir sur le serveur. La ressource est de 9 Ko après compression gzip, avec un taux de compression de 13,3%.

Résumé

À ce stade, notre optimisation préliminaire est terminée. Le temps de chargement du premier écran de mon projet actuel a été optimisé d'environ 12 secondes à environ 4 secondes. Puisqu'il s'agit d'un projet de démonstration et qu'aucune autre page ou fonction n'a été développée, l'effet n'est pas très évident. Vous pouvez faire des erreurs par vous-même. Tout le monde a une meilleure solution et peut en tirer des leçons ensemble !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment augmenter automatiquement les valeurs en JavaScript

Comment utiliser Redux dans les projets React (tutoriel détaillé)

Comment implémenter un flux de cascade de disposition aléatoire dans ionic3

Comment implémenter l'effet de retour en haut dans JS

Comment implémenter une boucle de barre de défilement d'élément pour ajouter du contenu en JavaScript

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!