Como usar LazyLoading con VueRouter con componentes en Vue
Buenas!
Les muestro como hacer una carga de componentes de tipo "lazy loading" para VueJs con VueRouter y RequireJs.
Sin más empezemos:
Primero mostraré la estrutura del index.html, hay vamos a incluir la referencia al main.js:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" data-main="app/main"></script>
</head>
</html>
En el Srv vamos a un CDN a traer el require, en el "data-main" colocamos el main.js
Luego la estructura del main.js sería algo así:
requirejs.config({
paths: {
'text': '../libs/require-text-2.0.12',
"Vue": "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue",
"vue": "https://rawgit.com/edgardleal/require-vuejs/master/dist/require-vuejs",
"VueRouter": "https://unpkg.com/vue-router/dist/vue-router"
shim: {"Vue": {"exports": "Vue"}}
});
//Aca vemos que se agregan 4 librerías, el "Text" nos sirve para leer los htmls, el Vue es el core, el vue es el "requirejsParaVue" y el VueRouter.
//Luego de esto vamos a agregar nuestra llamada al VueRouter y a nuestros componentes (cada componente es un "VueRouter", por así decirlo)
//Esta funcion nos servira para mandar a llamar cada "VueRouter" que como dijimos es un "componente"
function view(name) {
return function (resolve) {
return require([name], resolve);
};
}
require(["Vue", "VueRouter"], function (Vue, VueRouter) {
//acá se mandarán a llamar los "componentenes",tengan en cuenta que no se cargan la primera vez, sino al momento de llamar a la página o ruta, se cargará el componente (el truco está en el require dentro de la funcion "view")
//Hermoso, ¿No? :)
var routes = [
{path: '/pathNombre', name: "nombre", component: view("carpeta/nombreArchivoJs")}
///.. Acá iran las demás rutas
];
var router = new VueRouter({"routes": routes});
Vue.use(VueRouter);
var app = new Vue({"router": router, "data": {}, "methods": {}).$mount('#app');
});
Luego queda la estructura de carpeta del JS y HTML por cada "componente":
Primero el Js debería ir algo así:
//FolderRutaProyecto/carpeta/nombreArchivoJs.js
y sú sintaxis es algo así:
define(['text!carpeta/nombreArchivoJs.html'], function (htmlTemplate) {
var VueComponent = function () {
var self = this;
self.template = htmlTemplate; //Esto nos sirve para cargar el string del HTML al Vue
self.data = {};//Aca nuestro "modelo"
self.created = {};// nuestra funcion principal del ciclo de vida
self.methods = {}; //Nuestros métodos.
};
return new VueComponent();
});
Ahora el HTML:
//FolderRutaProyecto/carpeta/nombreArchivoJs.html
<div>
</div>
<!-- Aca si podemos incluir lo que sea -->
Y listo, repite este proceso para cada uno de tus "componentes" y BUM.
Ya tienes un proyecto Lazy Loading.
Ventajas de usarlo así, se quita la curva de aprendizaje del ES6 (o cómo le llamen cuando se hacen los "imports").
Bueno espero les sirva 
Saludos cordiales!
