Explication détaillée des étapes pour résoudre la lenteur du premier chargement du chargement paresseux de vue-router

Cette fois, je vais vous apporter une explication détaillée des étapes du chargement paresseux de vue-router pour résoudre la première vitesse de chargement lente. Quelles sont les précautions pour le chargement paresseux de vue-router afin de résoudre la première vitesse de chargement lente. vitesse de chargement. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

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 à vue-routerroutingchargement paresseux

Lors de l'écriture d'une application d'une seule page avec vue.js, le package apparaîtra Le package JavaScript est très volumineux et affecte 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. comme suit :

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)
  }
 ]
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Fonctionnement dynamique JS des balises HTML

Explication détaillée de l'utilisation de React Router v4

Comment BubbleTransition implémente la fonction de changement de 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!