Componentes asíncronos y Suspense
Cargue componentes de forma diferida con defineAsyncComponent, envuélvalos en y muestre contenido alternativo mientras se carga el paquete del componente.
Componentes asíncronos y Suspense es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué usar componentes asíncronos?
Cargar bajo demanda componentes grandes o poco utilizados, como un panel de administración o una biblioteca de gráficos, mantiene pequeño el bundle inicial. defineAsyncComponent de Vue gestiona el ciclo de vida de la importación dinámica.
defineAsyncComponent
Pase una función loader que devuelva una promesa que se resuelva en un componente. Vue gestiona la carga, los errores y los tiempos de espera.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Configuración del comportamiento asíncrono
Pase un objeto de opciones para personalizar la interfaz de carga, la interfaz de error, el retraso antes de cargar y el tiempo de espera.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});División de chunks del bundler
La importación dinámica se convierte en un chunk independiente en la salida. Use los comentarios mágicos de Vite/webpack para asignarle un nombre y hacer prefetch.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Carga diferida a nivel de ruta
Vue Router admite directamente componentes asíncronos en las definiciones de rutas.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Componente Suspense
El componente experimental <Suspense> de Vue muestra un fallback mientras cualquier dependencia asíncrona de su árbol está pendiente.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>setup() asíncrono
setup() puede ser asíncrono; Vue espera a que se resuelva antes de renderizar. Funciona dentro de Suspense.
<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>
<!-- Parent uses Suspense to handle the await -->Gestión de errores con onErrorCaptured
Use onErrorCaptured en un componente padre para capturar errores de componentes asíncronos o de setup asíncrono.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Combinar Suspense y un límite de errores
Envuelva un árbol de componentes asíncronos con Suspense, para la carga, y con un ancestro que capture errores.
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense es experimental
A partir de Vue 3.4, <Suspense> todavía está marcado como experimental; la API puede cambiar. Los componentes asíncronos en sí (defineAsyncComponent) son estables y están listos para producción.
Cuándo usar componentes asíncronos
Buenos candidatos: componentes de rutas, paneles de administración o configuración, modales abiertos bajo demanda y gráficos o editores pesados. Evítelos en: componentes pequeños y componentes usados en todas las páginas (divídalos de otra manera).
Comprobación rápida
¿Qué función de Vue 3 convierte una importación dinámica en un componente cargado de forma diferida?
Resumen: componentes asíncronos y Suspense
defineAsyncComponent envuelve las importaciones dinámicas para cargarlas de forma diferida. Configure loadingComponent, errorComponent, delay y timeout. Los bundlers generan chunks independientes. La carga diferida a nivel de ruta se realiza mediante component: () => import('...'). <Suspense> muestra un fallback mientras se resuelven las dependencias asíncronas (todavía es experimental). setup() asíncrono con top-level await funciona dentro de Suspense. onErrorCaptured captura errores asíncronos.
Preguntas frecuentes
¿La lección «Componentes asíncronos y Suspense» es gratis?
Sí — el texto completo de «Componentes asíncronos y Suspense» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes asíncronos y Suspense»?
Cargue componentes de forma diferida con defineAsyncComponent, envuélvalos en y muestre contenido alternativo mientras se carga el paquete del componente. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Componentes asíncronos y Suspense»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- provide() e inject() para la inyección de dependencias
- Componentes asíncronos y Suspense
- Directivas personalizadas
- Sistema de plugins: app.use()