Componentes asíncronos con defineAsyncComponent

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:30

Componentes asíncronos con defineAsyncComponent

Curso de Vue.js: Componentes y Composition API

Clase 5 de 23

Clase 5 / 23

Recursos

Los componentes asíncronos en Vue.js te permiten dividir tu aplicación en partes que cargan solo cuando el usuario las necesita, mejorando el rendimiento y la experiencia de carga. Esta técnica es clave para desarrolladores frontend que trabajan con proyectos Vue 3 y buscan optimizar el tamaño del bundle final.

¿Cómo se ve un componente Vue después de compilarse?

Cuando trabajas con archivos .vue, el navegador no los entiende directamente. Vue se encarga de transformarlos en HTML y JavaScript nativos durante el proceso de transpilación.

Al inspeccionar el código fuente, solo verás el HTML de la plantilla base, pero al usar el inspector del navegador encontrarás los elementos nativos generados por Vue, junto con atributos como data-v seguidos de números aleatorios. Estos identificadores únicos le permiten a Vue acceder rápidamente a cada instancia de componente sin recorrer todo el árbol del DOM [3:00].

¿Qué son los atributos data-v en Vue? Son identificadores únicos que Vue agrega a cada instancia de componente para localizarla rápidamente sin recorrer todo el árbol de elementos.

¿Por qué necesitas las Vue DevTools v6 (beta) para Vue 3?

Si estás trabajando con Vue 3, la extensión estándar de Vue DevTools no funcionará correctamente. Necesitas instalar la versión beta creada por Vue.js Dev desde la Chrome Store o el equivalente en Firefox [1:30].

Una vez instalada, deshabilita la versión anterior y recarga la pestaña. Verás un nuevo panel donde ya no aparecen divs, sino componentes con sus props, atributos, timeline de eventos e historial. Inspeccionar reactividad o flujo de props directamente en el DOM resulta tedioso, y aquí es donde las DevTools marcan la diferencia.

¿Qué genera el comando npm run build en un proyecto Vue?

Ejecutar npm run build elimina la carpeta dist previa y genera una nueva con tres carpetas principales: CSS, IMG y JS [5:30].

Dentro encontrarás:

El HTML minificado que invoca un archivo app.js con un identificador único de versión.
Archivos de imágenes y CSS también con identificadores únicos para versionado automático.
Código JavaScript donde se ven referencias a Webpack y a archivos como helloWorld.vue.

Todo lo que escribiste en tus componentes termina minificado dentro de estos archivos JavaScript. El problema aparece cuando el proyecto crece: el bundle se vuelve pesado y el usuario descarga código que quizá nunca usará.

¿Por qué dividir el bundle mejora el rendimiento?

No todos los componentes necesitan cargarse al inicio. Algunos solo aparecen tras una interacción del usuario, otros corresponden a rutas secundarias. Cargarlos todos juntos retrasa el primer render y consume ancho de banda innecesario.

La solución es separar el resultado en múltiples archivos para que lo crítico cargue primero y lo secundario se descargue después.

¿Cómo usar defineAsyncComponent para cargar componentes bajo demanda?

Vue 3 incluye la función defineAsyncComponent, que importas directamente desde la librería vue [8:30]. Permite registrar un componente que solo se cargará cuando realmente se necesite renderizar.

El patrón se ve así:

javascript import { defineAsyncComponent } from 'vue'

export default { components: { HelloWorld: defineAsyncComponent(() => import('./components/HelloWorld.vue') ) } }

En lugar del import estático tradicional, defines una variable que recibe defineAsyncComponent con una función que retorna un import dinámico. Node.js detecta esa importación durante la transpilación, procesa el archivo por separado y lo deja listo para cargarse en tiempo de ejecución.

¿Qué hace defineAsyncComponent en Vue 3? Es una función que registra un componente para carga diferida. Recibe una función que retorna un import dinámico y separa ese componente del bundle principal.

¿Cómo verificar que el componente se cargó de forma asíncrona?

En las Vue DevTools, el componente aparecerá envuelto en un Async Component Wrapper que contiene al HelloWorld dentro. Visualmente la app se ve idéntica, pero el árbol de componentes confirma que la carga ocurrió en diferido [10:15].

Al ejecutar de nuevo npm run build, notarás archivos chunk adicionales en la carpeta dist. Cada chunk corresponde a un archivo de Webpack que contiene un componente separado, listo para cargarse después del bundle principal.

¿Cuándo conviene usar componentes asíncronos en Vue?

Los casos donde más rinden son:

Vistas o rutas que no son la pantalla inicial.
Modales, drawers o componentes que dependen de una acción del usuario.
Librerías pesadas como editores de texto, gráficos o mapas.
Secciones de administración que solo ven ciertos roles.

Con esta técnica logras dos beneficios concretos: tus proyectos cargan más rápido al inicio y solo descargan los componentes que el usuario realmente va a ver. Sumado a la Vue CLI y los Single File Components, tu código queda más limpio, modular y reutilizable.

¿En qué parte de tu proyecto Vue piensas aplicar primero la carga asíncrona? Cuéntalo en los comentarios.