Verwenden Sie das verzögerte Laden des Vue-Routers, um das Problem der langsamen Geschwindigkeit zu lösen, das durch zu viele Ressourcen beim ersten Laden verursacht wird

In diesem Artikel wird hauptsächlich das verzögerte Laden von Vue-Router vorgestellt, um das Problem der langsamen Geschwindigkeit zu lösen, das durch zu viele Ressourcen beim ersten Laden verursacht wird. Der Artikel stellt das Problem des verzögerten Ladens von Vue-Router separat vor

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

Das Obige ist Was ich für alle zusammengestellt habe, wird hoffentlich in Zukunft für alle hilfreich sein.

Verwandte Artikel:

AJAX-Beispielanalyse für einfache asynchrone Kommunikation

AJAX-Verarbeitungsmethode für vom Server zurückgegebenes XML

Detaillierte Erläuterung des AJAX-Mechanismus und der domänenübergreifenden Kommunikation

Das obige ist der detaillierte Inhalt vonVerwenden Sie das verzögerte Laden des Vue-Routers, um das Problem der langsamen Geschwindigkeit zu lösen, das durch zu viele Ressourcen beim ersten Laden verursacht wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!