Curso Vue Router esencial: aprende a enrutar con Vue

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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue