Vue-Router Lazy Loading optimiert die Ladegeschwindigkeit

Dieses Mal bringe ich Ihnen Vue-Router Lazy Loading zur Optimierung der Ladegeschwindigkeit. Was sind die Vorsichtsmaßnahmen für Vue-Router Lazy Loading zur Optimierung der Ladegeschwindigkeit? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Verzögertes Laden: Wird auch als verzögertes Laden bezeichnet, dh Laden bei Bedarf und Laden nach Bedarf.

Wenn bei Einzelseitenanwendungen wie Vue kein verzögertes Laden der Anwendung erfolgt, sind die mit Webpack gepackten Dateien ungewöhnlich groß, was dazu führt, dass beim Aufrufen der Homepage zu viel Inhalt geladen werden muss und die Zeit vergeht Wenn es zu lang ist, tritt ein Fehler auf. Erstens ist ein langer weißer Bildschirm nicht förderlich für die Benutzererfahrung, selbst wenn der Ladevorgang abgeschlossen ist, kann die Seite geteilt und bei Bedarf geladen werden, was eine effektive Freigabe ermöglicht den Ladedruck auf der Homepage und verkürzen die Ladezeit der Homepage.

Um es einfach auszudrücken: Rufen Sie die Homepage auf, ohne zu viele Ressourcen auf einmal zu laden und es zu lange zu dauern! ! !

Lazy-Loading-Methode:

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

Nicht-Lazy-Loading-Methode:

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: Werfen wir einen Blick auf das verzögerte Laden von Vue-Router-Routen

Beim Schreiben einer einseitigen Anwendung mit vue.js ist das gepackte JavaScript-Paket sehr groß, was sich auf das Laden der Seite auswirkt. Wir können Routing Lazy Loading verwenden, um dieses Problem zu optimieren. Wenn wir eine bestimmte Route verwenden, laden wir die entsprechende Komponente, was effizienter ist. Der Implementierungscode lautet wie folgt:

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

Ich glaube Ihnen Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tipps zur Verwendung regulärer Ausdrücke unter Linux

vue-infinite-loading erzeugt einen unendlichen Ladeeffekt

Das obige ist der detaillierte Inhalt vonVue-Router Lazy Loading optimiert die Ladegeschwindigkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!