Le chargement paresseux de vue-router optimise la vitesse de chargement

Cette fois, je vais vous présenter le chargement paresseux de vue-router pour optimiser la vitesse de chargement. Quelles sont les précautions à prendre pour le chargement paresseux de vue-router pour optimiser la vitesse de chargement ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

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

Conseils pour utiliser les expressions régulières sous Linux

vue-infinite-loading crée un effet de chargement infini

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!