Wie man mit der langsamen Geschwindigkeit umgeht, die dadurch verursacht wird, dass beim Lazy Loading des Vue-Routers zum ersten Mal zu viele Ressourcen geladen werden

Dieses Mal zeige ich Ihnen, wie Sie mit der langsamen Geschwindigkeit umgehen können, die durch zu viele geladene Ressourcen beim langsamen Laden des Vue-Routers verursacht wird. Hinweis: Was sind die Probleme? Unten sind praktische Fälle. Werfen wir einen Blick darauf.

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 Loading

Wenn 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:

React Router v4 von Grund auf verwenden

So verwenden Sie JS zum dynamischen Hinzufügen von HTML-Tags

Das obige ist der detaillierte Inhalt vonWie man mit der langsamen Geschwindigkeit umgeht, die dadurch verursacht wird, dass beim Lazy Loading des Vue-Routers zum ersten Mal zu viele Ressourcen geladen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!