Unawezaje kufanya lazy-loading ya njia/vipengele katika Angular?

Question

Accepted Answer

**Lazy loading** inachelewesha kupakua kwa kode ya kipengele hadi wakati mtumiaji anaposogea kwake, badala ya kubandika kila kitu katika pakua la awali. Hii inapunguza mfuko wa awali na kuongeza kasi ya upakaji wa kwanza wa programu.

## Lazy-loading ya sehemu ya kujitegemea (ya kisasa)

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

Dinamiki `import()` inaeleza zana za kujenga kugawanya `AdminComponent` katika chunk yake mwenyewe, iliyopakuwa tu wakati mtumiaji anakwenda `/admin`.

## Lazy-loading ya kundi la njia

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

`loadChildren` inaohaitisha lazy-load eneo lote la kipengele (njia zake zote/sehemu) kama chunk moja — njia ya kawaida ya kugawanya programu kubwa kwa kipengele.

## Umbo lililotegemezwa na NgModule (makodi ya zamani)

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

## Kwa nini inaboressha utendaji

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

Watumii hupakua tu kile wanachokikagua — muhimu kwa programu kubwa za biashara na maeneo mengi ya kipengele, ambayo mtumiaji mwingine hawajaiwahi kufungua.

## Mbinu za kuingilia kabla (bora ya zote mbili)

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

Kuingilia kabla kunakuomba sehemu laini-laini katika muundo baada ya programu kupakia, kwa hivyo mfuko wa awali unabaki mdogo *na* kusogea baadaye kunajisikia kawaida. Unaweza pia kuandika mbinu za kasutumiaji (mfano preload tu njia zinazoweza kuja baadaye).

## Kwa nini kuna maana

Lazy loading ni mbinu kuu ya kuweka mfuko wa awali wa Angular mdogo habari programu inavyokua — muhimu kwa programu kubwa za biashara zenye vipengele vingi ambavyo Angular inaandika.

Kugawanya kwa njia/kipengele (`loadComponent`/`loadChildren`) inamaanisha pakua ya haraka ya kwanza, na kuunganishwa na mbinu ya kuingilia kabla kunatoa mwanzo wa haraka na kusogea kwa anga.

Ni desturi ya kawaida, yenye matokeo makubwa ya utendaji katika programu yoyote ya Angular ya kutosha.