Vue Router Lazy Load & Code Splitting

• Como indica en la documentación de Vue Router, cuando hay un module bundler de por medio (como Webpack) el tamaño final de nuestra aplicación puede convertirse en algo a tener en cuenta, afectando a la rapidez de carga y otros factores importantes.
• Para aliviar este problema, vamos a utilizar las técnicas de code splitting y lazy loading de Webpack (que es el module bundler que usa Vue CLI) para cargar la información que nos interesa bajo demanda.
• Si esto de Webpack es borroso para ti, no te preocupes, en Ecuela Vue tienes un curso de Webpack completo disponible.
• Ahora mismo, si cargamos nuestro proyecto y en las herramienta de desarrollo abrimos el tab "network" y filtramos por JavaScript para hacer un refresh comprobamos como todo el bundle se carga una única vez. No hay nada malo en ello, así funcionan las SPA.
• Sin embargo nosotros vamos a dividir (split) nuestro bundle en diferentes trozos (chunks) para cargarlos bajo demanda (lazy load).
• En nuestro archivos de rutas router/index.js, tenemos una ruta comentada desde el principio del curso. En ella la propiedad component es una función que retorna la sentencia import que carga el componente de forma dinámica.
• Es decir, component no devuelve directamente el componente, sino una función callback que se ejecutará sólo cuando se necesite: cuando se active la ruta que figura sobre path.
• Vamos a activar esta carga en diferido en todas las rutas sin excepción.
• [De paso eliminamos ...]

{
  path: "/user",
  name: "Home",
  component: () =>
    import(/* webpackChunkName: "AppUserList" */ "../views/AppUserList"),
  alias: "/"
},

• Ahora, si volvemos a las herramienta de desarrollo verás que sólo cargamos la información de cada ruta al acceder a ella.