Kaip užtrai įkelti maršrutus/funkcijas Angular?

Question

Accepted Answer

**Užtraus įkėlimas** atideda funkcijos kodo atsisiuntimą tol, kol vartotojas į ją naršo, vietoj to, kad viską susumdavus į pradinį atsisiuntimą. Tai sumažina pradinį paketą ir pagreitina programos pirmąjį įkėlimą.

## Užtraus nepavaldaus komponento įkėlimas (šiuolaikinis)

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

Dinaminis `import()` nurodo kūrimo įrankiui `AdminComponent` padalinti į atskirą gabalą, atsisiuntinį tik tada, kai vartotojas apsilanko `/admin`.

## Maršrutų grupės užtraus įkėlimas

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

`loadChildren` užtrai įkelia visą funkcijos sritį (visus jos maršrutus/komponentus) kaip vieną gabalą — standartinis būdas padalinti didelę programą pagal funkcijas.

## NgModule pagrindu paremta forma (senesni kodų pagrindai)

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

## Kodėl tai pagerina našumą

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

Vartotojai atsisiunčia tik tai, ką jie realiai aplankė — kritiškai svarbu didelėms įmonės programoms su daugybe funkcijos sričių, iš kurių dauguma tam tikro vartotojo niekada neatidaromos.

## Iš anksto įkėlimo strategijos (geriausias variantas)

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

Iš anksto įkėlimas parsiuntė tamsios schemos gabalus fone po to, kai programa įsikrauna, todėl pradinis paketas lieka mažas *ir* vėlesnis naršymas jaučiasi akimirka. Taip pat galite parašyti pasirinktines strategijas (pvz., iš anksto įkelti tik tikėtinus ateinančius maršrutus).

## Kodėl tai svarbu

Užtraus įkėlimas yra pagrindinė technika, kuri padeda išlaikyti Angular pradinį paketą mažą augant programai — būtina didelėms, kelių funkcijų Angular orientuotoms įmonės programoms.

Padalijimas pagal maršrutą/funkciją (`loadComponent`/`loadChildren`) reiškia greitesnius pirmuosius įkėlimus, o sujungimas su iš anksto įkėlimo strategija suteikia ir greitą paleidimą, ir greitą naršymą.

Tai standartinė, didelės įtakos našumo praktika bet kurioje reikšmingoje Angular programoje.