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 propiedadcomponent
es una función que retorna la sentenciaimport
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 sobrepath
. - 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.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?
Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.