Wie dynamische/async/lazy-Komponenten in VueJs hinzugefügt werden

Question

Ich möchte unter Komponenten auf Komponenten untergeordnete Komponenten in einigen Fällen hinzufügen. Ich habe kommen mit folgenden Pseudo-Code

If currentView == 'a' 
    load component A1 
    load component A2 
ElseIf currentView == 'b' 
    load component B2 
    load component B3 

Ich weiß, dass wir alle Komponenten in übergeordnete Komponente registrieren können wie:

Vue.component('a1-component', require('./A1Component.vue')); 
Vue.component('a2-component', require('./A2Component.vue')); 

Aber ich viele solcher Kinder Komponenten haben und ich brauche zu laden nur die erforderlichen Komponenten bei Bedarf. Daher ist das Laden aller Komponenten zunächst ein Overhead.

Ich habe versucht Dynamic components und in Vue Js. Alle Dynamic-Komponenten sind komplett geladen, also ist es nicht was ich will. Ich bin nicht sicher, wie Async-Komponenten verwendet werden können, um dies zu erreichen.

Ich benutze Laravel 5.4, VueJs 2.3.3 und Webpack. https://babeljs.io/docs/plugins/syntax-dynamic-import/

:

Answer 1

Sie Asynchron-Komponente und dynamischen Import um dies zu erreichen

Vue.component('foo',() => { 
    if(currentView === 'a') { 
     return import('./A1Component.vue') 
    } else { 
     return import('./B2Component.vue') 
    } 
}) 

zu verwenden dynamische Import kombinieren können, werden Sie syntax-dynamic-import Plugin Ihre Webpack

Babel Plugin hinzufügen müssen Webpack-Plugin: https://github.com/airbnb/babel-plugin-dynamic-import-webpack

Answer 2

Hey Mann Ich war bei dieser Art von Problem fast 4-5 Stunden gegoogelt.

Die Aufteilung funktionierte nicht wie erwartet. Mit babel preset es2015 lief es auf dem DEV-Server einwandfrei, wenn der Code-Uglifier fehlerhaft erstellt wurde. Nachdem ich es gebaut habe, hat es wunderbar funktioniert. Ich glaube nicht, dass Sie Webpack sagen müssen, um den Code zu teilen, es ist alles automatisch, wenn Sie nur die richtige Art des Imports verwenden, und das ist das const Foo =() => import ('./ Foo.vue') Geben Sie

ein

Alle Importe so erstellt einen Splitpunkt, und wenn Sie nicht möchten, dass es aufgeteilt wird, müssen Sie diesen zusätzlichen Schritt in der Dokumentation nehmen Ja, aber es ist nicht pro Ordner, sondern pro Datei Basis Dies würde helfen, auf jeden Fall also, wenn Sie 5 Ordner mit 25 Dateien, wird es 25 werden Bundle-Dateien, automatisch geladen, wenn

benötigt - https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/