0Pricing
Vue Academy · Lección

Componentes asíncronos con defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent y opciones delay y timeout

Componentes asíncronos con defineAsyncComponent es una lección gratuita de Vue 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Por qué usar componentes asíncronos

defineAsyncComponent permite cargar un componente de forma diferida: su código solo se obtiene cuando el componente se renderiza por primera vez.

Esto permite dividir el código por rutas y por componentes, reduce el tamaño del bundle inicial y acelera la primera renderización.

La forma de función loader

El uso más sencillo consiste en pasar una función loader que devuelve un import() dinámico. Vite/webpack divide automáticamente ese import en su propio chunk.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

La forma de objeto de opciones

Para tener un control más preciso, pase un objeto de opciones. Sus campos principales son:

  • loader — la función de importación dinámica
  • loadingComponent — se muestra durante la carga
  • errorComponent — se muestra si la carga falla
  • delay / timeout — controles de tiempo
import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: evitar que el spinner aparezca brevemente

La opción delay (200 ms de forma predeterminada) indica cuánto espera Vue antes de mostrar loadingComponent. Si el chunk se carga antes de que transcurra ese tiempo, no aparece ningún spinner.

Establezca delay: 0 para mostrar el estado de carga inmediatamente.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: hacer fallar las cargas lentas

La opción timeout establece el tiempo máximo de espera. Si el loader no se resuelve dentro de timeout ms, se muestra errorComponent y se registra un error.

De forma predeterminada no hay tiempo de espera: la carga espera indefinidamente.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

El callback onError

El handler onError se ejecuta cuando el loader es rechazado. Recibe el error, una función de retry, una función de fail y el número actual de attempt.

Aquí es donde se implementa la lógica de reintentos con un límite para redes inestables.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

Decidir entre retry y fail

Dentro de onError debe llamar exactamente a una de estas funciones: retry() o fail() (o a ninguna, lo que también provoca un fallo). Una estrategia habitual es reintentar los errores de red varias veces, pero fallar inmediatamente ante un error de sintaxis o de chunk que los reintentos no pueden solucionar.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Combinarlo con Suspense

Cuando un componente asíncrono está dentro de un boundary de Suspense, el boundary controla el estado de carga. En ese caso, el loadingComponent del propio componente se ignora: prevalece el fallback de Suspense.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

Chunks con nombre para depurar

Puede asignar un nombre al chunk generado mediante un comentario mágico. Esto facilita la lectura de las solicitudes de red y de los informes del bundle.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

Componentes asíncronos y props

Los componentes asíncronos aceptan props y emiten eventos exactamente igual que los componentes normales. Vue reenvía todo de forma transparente cuando el componente real se resuelve; no es necesario cambiar el punto de uso.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

Buena práctica: aplicar lazy-loading con cuidado en la parte visible

Cargue de forma diferida los componentes que están fuera de la pantalla, detrás de interacciones (modales o pestañas) o que se usan rara vez. Evite aplicar lazy-loading a la interfaz crítica visible al cargar la página: el viaje de red adicional puede perjudicar el rendimiento percibido.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

Comprobación rápida

Compruebe su comprensión de defineAsyncComponent.

Recapitulación

Ha aprendido a cargar componentes asíncronos con defineAsyncComponent:

  • la forma loader devuelve un import() dinámico para dividir el código
  • la forma de opciones añade loadingComponent, errorComponent, delay y timeout
  • delay evita que el spinner aparezca brevemente; timeout hace fallar las cargas lentas
  • onError(error, retry, fail, attempts) implementa la lógica de reintentar o fallar
  • dentro de Suspense, el fallback del boundary se encarga de la interfaz de carga

Preguntas frecuentes

¿La lección «Componentes asíncronos con defineAsyncComponent» es gratis?

Sí — el texto completo de «Componentes asíncronos con defineAsyncComponent» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Componentes asíncronos con defineAsyncComponent»?

defineAsyncComponent(), loadingComponent, errorComponent y opciones delay y timeout Practicas Vue 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 Vue Academy?

No se requiere experiencia previa. Vue 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 con defineAsyncComponent»?

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 Vue Academy?

Sí. Cada lección de Vue 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

  1. Componente Vue Suspense
  2. Componentes asíncronos con defineAsyncComponent
  3. SSR en streaming con renderToWebStream
  4. Estrategias de hidratación diferida
← Volver a Vue Academy