2016-05-17 20 views
7

Ich versuche, eine Anzahl von Vue.js Komponenten in meine app.js Datei (mit browserify/vueify via Elixir) in einem Laravel-Projekt zu laden.Async/Lazy Load Vue Komponenten mit browserify

Anstatt alle Komponenten gleichzeitig zu laden, möchte ich die einzelnen vue-Komponenten bei Bedarf mit vue router laden.

Wo kann ich die Datei partition bundle json einrichten und wie sollte sie aufgebaut sein? Im Moment

, gebunden Ive aus der im Anschluss an eine meiner Haupt app.js Datei:

import Vue from 'vue'; 
import Resource from 'vue-resource'; 
import VueRouter from 'vue-router'; 

// These are the components that I wish to lazy load: 
// import Users from './components/Users.vue'; 
// import Sales from './components/Sales.vue'; 
// import Projects from './components/Projects.vue'; 
// import Dashboard from './components/Dashboard.vue'; 
// import Receipts from './components/Receipts.vue'; 

Vue.use(Resource); 
Vue.use(VueRouter); 

var router = new VueRouter(); 

router.map({ 
    '/async': { 
    component: function (resolve) { 
     loadjs(['./components/Users.vue'], resolve) 
    } 
    } 
}) 

Hier ist, wo ich stecke:

  1. Wie wir faul laden alle .vue Komponenten oben in der router.map Funktion aufgelistet?
  2. Wie wird die partition table json Datei für die oben genannten eingerichtet, und wo sollte es gespeichert werden?
+0

Ziemlich alte Frage, aber wenn jemand mehr Informationen zum Lazy Loading Komponenten benötigt. Hier ist ein Link zu den [docs] (https://router.vuejs.org/en/advanced/lazy-loading.html). – AWolf

Antwort

1

Aus der Dokumentation https://vuejs.org/v2/guide/components.html#Async-Components

Wenn Sie einen Browserify-Nutzer sind, die Asynchron-Komponenten verwenden möchte, hat sein Schöpfer es leider deutlich gemacht, dass „Asynchron-Laden nicht etwas ist, das Browserify wird jemals unterstützen. " Offiziell zumindest. Die Browserify-Community hat einige Problemumgehungen gefunden, die für vorhandene und komplexe Anwendungen hilfreich sein können. Für alle anderen Szenarien, empfehlen wir einfach Webpack für integrierte, erstklassige Async-Unterstützung zu verwenden.