Über Vue-Code-Splitting und Lazy Loading

Lazy Loading wird auch als verzögertes Laden bezeichnet, was bedeutet, dass es bei Bedarf und nach Bedarf geladen wird. Dieser Artikel führt Sie hauptsächlich in die Implementierungsmethode der Vue-Code-Segmentierung und des verzögerten Ladens ein. Der Artikel bietet einen gewissen Referenz-Lernwert für alle, die ihn beim Lernen oder Arbeiten benötigen Gemeinsam studieren. Ich hoffe, es hilft allen.

Warum verzögertes Laden erforderlich ist

Wenn in einer Einzelseitenanwendung kein verzögertes Laden der Anwendung erfolgt, ist die mit Webpack gepackte Datei ungewöhnlich groß, was dazu führt, dass zu viel Inhalt geladen werden muss Wenn es zu viele gibt, ist die Verzögerung zu lang, was der Benutzererfahrung nicht zuträglich ist. Durch die Verwendung von Lazy Loading kann die Seite bei Bedarf geladen werden, wodurch der Ladedruck auf der Homepage effektiv verteilt werden kann und die Ladezeit der Homepage reduzieren

So arbeiten Sie mit Webpack zusammen, um das verzögerte Laden von Komponenten zu implementieren

1 Konfigurieren Sie das chunkFilename-Attribut im Ausgabepfad in der Webpack-Konfigurationsdatei

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},

Der chunkFilename-Pfad wird als Pfad für das verzögerte Laden von Komponenten verwendet

2. Arbeiten Sie mit der von Webpack unterstützten asynchronen Lademethode zusammen

• resolve = > require([URL], lösen), gute Unterstützung

• () => Die offizielle Website von webpack2 hat angegeben, dass es schrittweise abgeschafft wird, was jedoch nicht der Fall ist empfohlen.

• () => import(URL), die offizielle Website von webpack2 empfiehlt die Verwendung, gehört zur Kategorie es7 und muss mit dem Syntax-Dynamic-Import-Plugin von babel verwendet werden -in. Die spezifische Verwendung ist wie folgt

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]

Einführung

In der 2-Ära ist es für Vue einfacher Führen Sie Code-Splitting und verzögertes Laden durch. Es ist kein Loader und require.ensure erforderlich.

Import löst alles.

Split-Ebenen

Vue Code Split Lazy Loading umfasst die folgenden Ebenen:

1. Split Lazy Loading auf Komponentenebene

2. Router-Routing-Ebene

3. Vuex-Modul

Codeaufteilung auf Komponentenebene

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})

Codeaufteilung auf Routing-Ebene

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})

Vuex-Modulcodeaufteilung, es gibt eine dynamische Registrierungsmodulmethode in Vuex und Import

const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})

Zusammenfassung

In allgemeinen Projekten , reicht es für uns aus, nach Router- und Komponentenebene zu unterteilen (oder nur die Router-Aufteilung zu verwenden). Große Projekte nutzen vielleicht alle drei, aber die Verwendung ist doch sehr einfach, oder?

Verwandte Empfehlungen:

Schritte zum Implementieren von Lazy Loading und domänenübergreifender Implementierung mit Js

Einführung in das Lazy Loading von Bildern mit JavaScript

Verzögertes Laden von Bildern

Das obige ist der detaillierte Inhalt vonÜber Vue-Code-Splitting und Lazy Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!