Come si implementa il lazy-loading delle route/feature in Angular?

Question

Accepted Answer

**Lazy loading** rinvia il download del codice di una feature fino a quando l'utente non naviga verso di essa, invece di includere tutto nel download iniziale. Questo riduce il bundle iniziale e accelera il primo caricamento dell'app.

## Lazy-loading di un componente standalone (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),
  },
];
```

L'`import()` dinamico comunica al build tool di dividere `AdminComponent` in un chunk separato, scaricato solo quando l'utente visita `/admin`.

## Lazy-loading di un gruppo di route

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

`loadChildren` carica in modalità lazy un'intera area di feature (tutte le sue route/componenti) come un unico chunk — il modo standard per dividere un'app grande per feature.

## La forma basata su NgModule (codebase più vecchi)

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

## Perché è importante

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

Gli utenti scaricano solo ciò che effettivamente visitano — critico per le app enterprise di grandi dimensioni con molte aree di feature, la maggior parte delle quali un dato utente non apre mai.

## Strategie di preloading (il meglio dei due mondi)

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

Il preloading recupera i chunk lazy in background dopo il caricamento dell'app, così il bundle iniziale rimane piccolo *e* la navigazione successiva risulta istantanea. Puoi anche scrivere strategie personalizzate (ad es. preload solo delle route probabili successive).

## Perché è importante

Lazy loading è la tecnica primaria per mantenere il bundle iniziale di Angular piccolo man mano che l'app cresce — essenziale per le app enterprise grandi e multi-feature che Angular targeting.

Dividere per route/feature (`loadComponent`/`loadChildren`) significa primi caricamenti più veloci, e abbinando con una strategia di preloading si ottengono sia un inizio veloce che una navigazione scattante.

È una pratica di performance standard e ad alto impatto in qualsiasi applicazione Angular di dimensioni considerevoli.