javascript - library - vue router

Componentes Async/Lazy Load Vue con browserify

Question

Estoy intentando cargar varios componentes Vue.js en mi archivo app.js (usando browserify / vueify a través de elixir) en un proyecto laravel.

En lugar de cargar todos los componentes a la vez, me gustaría cargar los componentes vue individuales cuando los necesite usando el enrutador vue .

¿Dónde configuro el archivo partition bundle json y cómo debería estructurarse?

Por el momento, he vinculado el siguiente archivo principal app.js :

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)
    }
  }
})

Aquí es donde estoy atrapado:

1. ¿Cómo cargamos todos los componentes .vue enumerados anteriormente en la función router.map ?
2. ¿Cómo configurar el archivo partition table json para lo anterior y dónde debería guardarse?

Answer 1

De la documentación https://vuejs.org/v2/guide/components.html#Async-Components

Si eres un usuario de Browserify que desea utilizar componentes asíncronos, lamentablemente su creador dejó en claro que la carga asíncrona "no es algo que Browserify pueda soportar". Oficialmente, al menos. La comunidad Browserify ha encontrado algunas soluciones alternativas, que pueden ser útiles para aplicaciones existentes y complejas. Para todos los demás escenarios, recomendamos simplemente usar Webpack para el soporte asincrónico incorporado de primera clase.