Cum încarci leneș rutele/caracteristicile în Angular?

Question

Accepted Answer

**Lazy loading** amână descărcarea codului unei caracteristici până când utilizatorul navighează la aceasta, în loc să plasez totul în descărcarea inițială. Aceasta micșorează pachetul inițial și accelerează prima încărcare a aplicației.

## Încărcarea leneșă a unei componente independente (modern)

```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),
  },
];
```

`import()` dinamicul spune instrumentului de compilare să împartă `AdminComponent` în propriul chunk, descărcat doar atunci când utilizatorul vizitează `/admin`.

## Încărcarea leneșă a unui grup de rute

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

`loadChildren` încarcă leneș o întreagă zonă de caracteristici (toate rutele/componentele sale) ca un singur chunk — modul standard de a împărți o aplicație mare pe caracteristici.

## Formularul bazat pe NgModule (codebases mai vechi)

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

## De ce este important

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

Utilizatorii descarcă doar ceea ce vizitează efectiv — critic pentru aplicațiile mari de întreprindere cu multe zone de caracteristici, dintre care majoritatea nici un utilizator nu le deschide.

## Strategii de preîncărcare (cele mai bune din ambele lumi)

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

Preîncărcarea aduce chunksuri leneșe în fundal după ce aplicația se încarcă, astfel încât pachetul inițial rămâne mic *și* navigarea ulterioară se simte instantanee. De asemenea, puteți scrie strategii personalizate (de exemplu, preîncarcă doar rutele următoare probabile).

## De ce este important

Lazy loading este tehnica principală pentru a menține pachetul inițial Angular mic pe măsură ce aplicația crește — esențial pentru aplicațiile mari de întreprindere cu mai multe caracteristici pe care Angular le vizează.

Împărțirea după rută/caracteristică (`loadComponent`/`loadChildren`) înseamnă încărcări inițiale mai rapide, iar atunci când este combinată cu o strategie de preîncărcare, oferă atât o pornire rapidă, cât și o navigare cursiv.

Este o practică de performanță standard și de mare impact în orice aplicație Angular semnificativă.