Lazy Load & 404 Page - Tylung/vue-apuntes GitHub Wiki

El Lazyload nos ayuda a que el bundle inicial de la aplicación sea mas pequeño y que se carguen los componentes de manera independiente, es decir, que se carguen cuando sean necesarios.

Archivo: src/router/router.js

const routes = [
    // { path: '/', component: ListPage },
    // { path: '/about', component: AboutPage },
    // { path: '/id', component: PokemonPage },
    // { path: '/:pathMatch(.*)*', component: NoPageFound }, ❌
    { 
      path: '/', 
      component: () => import(/* webpackChunkName: "ListPage"*/ '@/modules/pokemon/pages/ListPage') ✔️
    },
    { 
      path: '/about', 
      component: () => import(/* webpackChunkName: "AboutPage"*/ '@/modules/pokemon/pages/AboutPage') 
    },
    { 
      path: '/id', 
      component: () => import(/* webpackChunkName: "PokemonPage"*/ '@/modules/pokemon/pages/PokemonPage')  
    },
   ...
  ]

Cuando se llame a cualquier componente, este se importara, mientras no se cargará ese archivo.

Siempre se debe importar con una función de flecha sino dará error! :fire:

• El webpackChunkName es el nombre que tendra el archivo cuando se importe, sirve para identificar que archivos carga la aplicación

const routes = [
    ...
    { 
      path: '/:pathMatch(.*)*', 
      component: () => import(/* webpackChunkName: "NoFoundPage"*/ '@/modules/shared/pages/NoPageFound') 
    },
  ]

Para hacer una 404 Page, tenemos que poner esta expresion '/:pathMatch(.*)*', en el path de una de las rutas y cuando el url no coincida con ninguna de nuestras rutas, llamara al componente noPageFound