¿Cómo habilitan los componentes asincrónico la carga perezosa?

Question

Accepted Answer

**Los componentes asincrónico** te permiten cargar el código de un componente **solo cuando realmente se necesita**, dividiéndolo en un bundle separado (chunk) que se descarga bajo demanda. Esto reduce el JavaScript inicial que el usuario descarga.

## Definir un componente asincrónico

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

El `import()` dinámico le indica al empaquetador (Vite/webpack) que divida `HeavyChart.vue` en su propio archivo, cargado de forma perezosa la primera vez que se usa el componente — no como parte del bundle principal.

## Por qué es importante para el rendimiento

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

Los componentes grandes y raramente utilizados (editores de texto enriquecido, gráficos, modales, paneles de administración) no necesitan estar en la descarga inicial. La carga perezosa de estos mejora el tiempo de carga inicial y Core Web Vitals.

## Manejo de estados de carga y error

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

Esta forma avanzada te permite mostrar un spinner durante la descarga y un fallback en caso de error — importante ya que la carga perezosa introduce un retardo de red (normalmente breve).

## Emparejamiento común: división de código a nivel de ruta

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

La carga perezosa de componentes de ruta es el uso más común e impactante — el código de cada página se carga solo cuando el usuario navega hacia ella.

## Por qué es importante

Los componentes asincrónico son el mecanismo de Vue para la **división de código** — la técnica clave para mantener los bundles iniciales pequeños a medida que crece una aplicación.

Al cargar de forma perezosa componentes pesados o específicos de ruta bajo demanda (con UI opcional de carga/error), reduces el JavaScript que los usuarios descargan al principio, acelerando la carga inicial.

Es una optimización de rendimiento estándar y de alto impacto, especialmente cuando se aplica a rutas.