• 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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬