Detaillierte Erläuterung der Schritte zur Behebung der langsamen ersten Ladegeschwindigkeit beim verzögerten Laden des Vue-Routers

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte für das verzögerte Laden von Vue-Routern geben, um die langsame erste Ladegeschwindigkeit zu beheben Ladegeschwindigkeit. Das Folgende ist ein praktischer Fall. 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 vue-routerRoutingLazy LoadingWenn Sie eine einseitige Anwendung mit vue.js schreiben, wird

JavaScript

gepackt Das Paket ist sehr groß und wirkt sich auf das Laden der Seite aus, um dieses Problem zu optimieren. Wenn wir eine bestimmte Route verwenden, ist der Implementierungscode 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, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS dynamischer Betrieb von HTML-Tags

Detaillierte Erläuterung der Verwendung von React Router v4

Wie BubbleTransition die Seitenwechselfunktion implementiert

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Behebung der langsamen ersten Ladegeschwindigkeit beim verzögerten Laden des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!