¿Cómo haces lazy-load de rutas/características en Angular?

Question

Accepted Answer

**El lazy loading** pospone la descarga del código de una característica hasta que el usuario navega hacia ella, en lugar de agrupar todo en la descarga inicial. Esto reduce el tamaño del bundle inicial y acelera la primera carga de la aplicación.

## Lazy loading de un componente independiente (moderno)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

El `import()` dinámico le dice a la herramienta de construcción que divida `AdminComponent` en su propio chunk, descargado solo cuando el usuario visita `/admin`.

## Lazy loading de un grupo de rutas

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` realiza lazy loading de un área de características completa (todas sus rutas/componentes) como un único chunk — la forma estándar de dividir una aplicación grande por características.

## El formulario basado en NgModule (bases de código antiguas)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Por qué mejora el rendimiento

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Los usuarios solo descargan lo que realmente visitan — crítico para aplicaciones empresariales grandes con muchas áreas de características, la mayoría de las cuales un usuario determinado nunca abre.

## Estrategias de precarga (lo mejor de ambas)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

La precarga obtiene chunks lazy en segundo plano después de que se carga la aplicación, por lo que el bundle inicial se mantiene pequeño *y* la navegación posterior se siente instantánea. También puedes escribir estrategias personalizadas (por ejemplo, precarga solo las rutas probables siguientes).

## Por qué es importante

El lazy loading es la técnica principal para mantener pequeño el bundle inicial de Angular mientras la aplicación crece — esencial para las aplicaciones empresariales grandes y multifuncionales que Angular tiene como objetivo.

Dividir por ruta/característica (`loadComponent`/`loadChildren`) significa cargas iniciales más rápidas, y combinar con una estrategia de precarga proporciona tanto un inicio rápido como una navegación fluida.

Es una práctica de rendimiento estándar y de alto impacto en cualquier aplicación Angular de tamaño considerable.