Utilisez le chargement paresseux de vue-router pour résoudre le problème de vitesse lente causé par trop de ressources lors du premier chargement

Cet article présente principalement le chargement paresseux de vue-router pour résoudre le problème de vitesse lente causé par trop de ressources lors du premier chargement. L'article présente séparément le problème de chargement paresseux de routage de vue router. Les amis qui en ont besoin peuvent s'y référer.

Chargement paresseux : également appelé chargement différé, c'est-à-dire chargement en cas de besoin et chargement en cas de besoin.

Pour les applications monopage comme Vue, s'il n'y a pas de chargement paresseux de l'application, les fichiers fournis avec webpack seront anormalement volumineux, ce qui entraînera le chargement d'une trop grande quantité de contenu lors de l'accès à la page d'accueil, et le temps sera trop longtemps et une erreur se produira. Ah, tout d'abord, un long écran blanc n'est pas propice à l'expérience utilisateur même si le chargement est effectué. L'utilisation du chargement paresseux peut diviser la page et la charger en cas de besoin, ce qui peut efficacement partager. la pression de chargement sur la page d'accueil et réduire le temps de chargement de la page d'accueil.

Pour faire simple : entrez dans la page d'accueil sans charger trop de ressources à la fois et sans que cela prenne trop de temps ! ! !

Méthode de chargement paresseux :

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:'/',
    component:resolve => require(['@/components/index'],resolve)
  }
 ]
})

Méthode de chargement non paresseux :

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:'/',
    component:index
  }
 ]
})

ps : Jetons un coup d'œil au chargement paresseux du routage vue-router

Lors de l'écriture d'une application d'une seule page avec vue.js, le package JavaScript fourni sera très volumineux, affectant le chargement des pages. Nous pouvons utiliser le chargement paresseux des routes pour optimiser ce problème. Lorsque nous utilisons une certaine route, nous chargerons les composants correspondants, ce qui sera plus efficace :

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

Analyse d'un exemple de communication asynchrone simple AJAX

Méthode de traitement AJAX du XML renvoyé par le serveur

Explication détaillée du mécanisme AJAX et de la communication inter-domaines

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!