Einführung in die Methode zum Implementieren des verzögerten Ladens von Routen mit vue+webpack2

In der folgenden Spalte „Vue.js-Tutorial“ erfahren Sie, wie vue+webpack2 das Lazy Loading des Routings implementiert. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Beim Packen und Erstellen einer Anwendung wird das Javascript-Paket sehr groß, was sich auf das Laden der Seite auswirkt. Es wäre effizienter, wenn wir die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke aufteilen und dann die entsprechenden Komponenten laden könnten, wenn auf die Route zugegriffen wird.

Kombinieren Sie die asynchronen Komponenten von Vue und die Code-Splitting-Funktion von Webpack, um das verzögerte Laden von Routing-Komponenten einfach zu implementieren.

Erstens kann die asynchrone Komponente als Factory-Funktion definiert werden, die ein Promise zurückgibt (das von dieser Funktion zurückgegebene Promise sollte die Komponente selbst auflösen):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

Zweitens können wir in Webpack 2 dynamische Importsyntax verwenden, um Code zu definieren Chunking-Split-Punkt:

import('./Foo.vue') // 返回 Promise

Durch die Kombination der beiden wird auf diese Weise eine asynchrone Komponente definiert, deren Code automatisch von Webpack aufgeteilt werden kann.

const Foo = () => import('./Foo.vue')

An der Routing-Konfiguration muss nichts geändert werden, verwenden Sie sie einfach wie gewohnt

:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

Foo

Verwandte Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten)

Vue-Tutorial Empfohlen : Die neuesten 5 vue.js-Video-Tutorials im Jahr 2020

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Implementieren des verzögerten Ladens von Routen mit vue+webpack2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!