Comment gérer la lenteur causée par le chargement d'un trop grand nombre de ressources pour la première fois lors du chargement paresseux de vue-router

Cette fois, je vais vous montrer comment gérer la vitesse lente causée par trop de ressources chargées pour la première fois lors du chargement paresseux de vue-router Remarque Quels sont les problèmes  ? Jetons un coup d'oeil.

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 charger la page 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 :

Utiliser React Router v4 à partir de zéro

Comment utiliser JS pour ajouter dynamiquement des balises HTML

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!