Vue 48: Carga Diferida (Lazy) de Rutas
easy⏱ 5 mincoursevue
component: () => import(...)
En una app real y empaquetada, el componente de una ruta no tiene que importarse por adelantado — component: () => import('./views/About.vue') le da al router una función que retorna una promesa de import dinámico. El bundler (Vite/webpack) divide esa vista en su propio chunk, descargado solo cuando la ruta se visita por primera vez.
const routes = [
{ path: '/', component: Home },
{
path: '/about',
component: () => import('./views/About.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
defineAsyncComponent como sustituto en vivo
Este sandbox de un solo archivo no puede hacer code-splitting real, pero defineAsyncComponent({ loader, loadingComponent }) captura exactamente el mismo modelo mental en vivo: la función loader retorna una promesa (aquí, una con retraso vía setTimeout que simula un chunk de red), y Vue renderiza loadingComponent hasta que se resuelve — precisamente lo que se siente una ruta lazy manejada por el bundler para un usuario con conexión lenta.
La misma idea, dos loaders distintos
Cambia la promesa envuelta en setTimeout por un () => import('./views/About.vue') real en una app empaquetada y el comportamiento — una ruta que carga su componente bajo demanda, mostrando un estado de carga mientras tanto — es idéntico.
Pruébalo
Haz clic en "About (lazy)" y observa la tarjeta de carga ⏳ renderizarse durante 1.5s antes de que la vista real de About la reemplace — ese lapso es exactamente lo que se siente una descarga de chunk lenta en producción.