Rutas de carga diferida en Vue con comentarios dinámicos del paquete web

La forma en que funciona el enrutamiento en JavaScript suele ser que usted especifica qué patrón de URL relativo desea para qué componente representar. Entonces, ¿ /aboutquieres que el About /componente se renderice? Echemos un vistazo a cómo hacer esto en Vue/ Vue Router con carga diferida y hagámoslo de la forma más limpia posible. Utilizo este pequeño consejo todo el tiempo en mi propio trabajo.

Un repositorio que incluye todo lo tratado en esta publicación está disponible en GitHub.

probablemente hayas visto rutas (URL) de Vue como esta:

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'import Login from '../views/Login.vue'Vue.use(VueRouter)const routes = [  { path: '/', name: 'Home', component: Home },  { path: '/about', name: 'About', component: About },  { path: '/login', name: 'Login', component: Login }]const router = new VueRouter({  routes})export default router

Eso cargará el Home /componente en la /ruta, el About /componente en la /aboutruta y el Login /componente en la /loginruta.

Sin embargo, eso no hace un muy buen trabajo de división de código, ya que esos tres componentes se agruparán juntos en lugar de cargarse dinámicamente según sea necesario.

Aquí hay otra forma de hacer lo mismo, solo que dividiendo el código con declaraciones de importación dinámicas y nombres de fragmentos de paquetes web:

const routes = [  {    path: '/',    name: 'Home',    component: () = import(/* webpackChunkName: "Home" */ '../views/Home.vue')  },  {    path: '/about',    name: 'About',    component: () = import(/* webpackChunkName: "About" */ '../views/About.vue')  },  {    path: '/login',    name: 'Login',    component: () = import(/* webpackChunkName: "Login" */ '../views/Login.vue')  }]

Esto está perfectamente bien y no tiene mayores inconvenientes, aparte de ser un poco detallado y repetitivo. Dado que somos desarrolladores increíbles, hagamos un poco de abstracción para ayudar, usando un arraymétodo que veremos .map.

const routeOptions = [  { path: '/', name: 'Home' },  { path: '/about', name: 'About' },  { path: '/login', name: 'Login' }]const routes = routeOptions.map(route = {  return {    ...route,    component: () = import(`@/views/${route.name}.vue`)  }})const router = new VueRouter({  routes})

Ahora hemos reducido el uso de la componentclave usando la ruta namecomo parámetro en la importfunción.

Pero, ¿qué sucede si queremos establecer el nombre del fragmento?

Hasta donde yo sé, no se pueden tener comentarios dinámicos en JavaScript sin algún tipo de paso de compilación. Por lo tanto, en este caso estamos sacrificando los comentarios ( webpackChunkName) a favor de tener que escribir menos código. Depende totalmente de ti cuál prefieres.

Es broma, arreglémoslo.

A partir del paquete web 2.6.0, los marcadores de posición [index]y [request]son compatibles, lo que significa que podemos establecer el nombre del fragmento generado de esta manera:

// ...const routeOptions = [  { path: '/', name: 'Home' },  { path: '/about', name: 'About' },  { path: '/login', name: 'Login' }]const routes = routeOptions.map(route = {  return {    ...route,    component: () = import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)  }})const router = new VueRouter({  routes})

¡Lindo! Ahora tenemos todo el poder, además de rutas cargadas dinámicamente con fragmentos con nombre. Y funciona con Vue 2 y Vue 3. Puedes comprobarlo ejecutando npm run builden la terminal:

Pero aún podemos llevar esto un paso más allá agrupando las rutas cargadas de forma diferida en fragmentos con nombre en lugar de componentes individuales. Por ejemplo, podemos crear grupos que agrupen nuestros componentes más importantes y el resto en otro grupo “no tan importante”. Simplemente actualizamos el nombre del fragmento del paquete web en lugar del [request]marcador de posición que usamos anteriormente:

const routes = [  {    path: "/",    name: "Home",    component: () =      import(/* webpackChunkName: "VeryImportantThings" */ "../views/Home.vue")  },  {    path: "/about",    name: "About",    component: () =      import(/* webpackChunkName: "VeryImportantThings" */ "../views/About.vue")  },  {    path: "/login",    name: "Login",    component: () =      import(/* webpackChunkName: "NotSoImportant" */ "../views/Login.vue")  },  {    path: "/contact",    name: "Contact",    component: () =      import(/* webpackChunkName: "NotSoImportant" */ "../views/Contact.vue")  }];

Ahora nuestros cuatro componentes están agrupados en dos partes separadas.

¡Ahí tienes! Una técnica para rutas de carga diferida en Vue, además de algunas ideas sobre cómo nombrarlas y agruparlas durante la compilación.