So verwenden Sie die Codetrennung von Webpack, um das Vue-Laden zu implementieren

Der Inhalt dieses Artikels befasst sich mit der Verwendung der Codetrennung von Webpack zur Implementierung des Vue-Ladens. Ich hoffe, dass er für Sie hilfreich ist.

Wenn ein Vue-Projekt sehr groß wird, verwenden Sie die Code-Trennfunktion von Webpack, um den Code von Vue Components, routes oder Vuex zu trennen und ihn bei Bedarf zu laden Geschwindigkeit des ersten Bildschirms der App.

In Vue-Projekten können wir Lazy Loading- und Code-Trennungsfunktionen in drei verschiedenen Situationen verwenden:

• Vue-Komponenten, auch bekannt als asynchrone Komponenten

• Vue-Router

• Vuex

Was die drei gemeinsam haben, ist die Verwendung des dynamischen Imports, der unterstützt wurde in der zweiten Version von Webpack.

Lazy Loading in Vue-Komponenten

In Eggheads gibt es eine Erklärung zur Verwendung asynchroner Vue-Komponenten zum Implementieren des On-Demand-Ladens von Komponenten.

Um eine asynchrone Komponente zu implementieren, müssen Sie nur die Funktion import verwenden, um die Komponente zu registrieren:

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

Sie können auch die lokale Registrierungsmethode verwenden:

new Vue({
  // ...
  components: {
    'AsyncCmp': () => import('./AsyncCmp')
  }
})

Verwenden Sie die Pfeilfunktion, um auf die Funktion import zu zeigen. Vue führt nur dann den Code aus, der das Laden der Komponente anfordert, wenn die Komponente benötigt wird.

Wenn die importierte Komponente mit einer benannten Methode exportiert wird, können Sie die Objektdestrukturierung im Rückgabewert von Promise verwenden, um die Komponente bei Bedarf zu laden. Das Folgende ist ein Beispiel für das Laden der UiAlert-Komponente von KeenUI:

components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}

Lazy Loading im Vue-Router

Der Vue-Router unterstützt nativ Lazy Loading. Dasselbe wie das verzögerte Laden von Komponenten mit der Funktion import. Beispielsweise möchten wir die Komponente /login langsam unter der Route Login laden.

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

Lazy Loading in Vuex

Die registerModule-Methode von Vuex ermöglicht es uns, Vuex-Module dynamisch zu erstellen. Wenn wir die Funktion import verwenden, um das Modul als Nutzlast in Promise zurückzugeben, wird Lazy Loading erreicht.

const store = new Vuex.Store()

...

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

Zusammenfassung

Lazy Loading ist in Vue + Webpack sehr einfach. Nutzen Sie die oben erlernten Methoden schnell, um den Code Ihres Vue-Projekts zu trennen und ihn bei Bedarf zu laden. Dies kann die Zeit zum Laden des ersten Bildschirms der Anwendung erheblich verkürzen.

Verwandte Empfehlungen:

Das System fasst gängige JS-Methoden zusammen und organisiert sie (Sammlungen)

Webpack4 und reagiert auf Implementierungsmethoden zum Erstellen mehrerer -seitige Anwendungen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Codetrennung von Webpack, um das Vue-Laden zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!