Conas a dhéanann tú forghealadh míchéillí na slígheanna/na ngnéithe in Angular?

Question

Accepted Answer

Cuireann **lazy loading** dá chéile an téarnamh cóid gné go dtí an úsáideoir a bhrabhsálann ann, in ionad gach rud a chur i mbúnt an turais tosaigh. Laghdaíonn sé seo an bundle tosaigh agus gealadh ar an gcéad ualú an app.

## Lazy-loading comhpháirt standalone (nua-aimseartha)

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

Insint an `import()` dinimiciúil don uirlis tógála `AdminComponent` a dhealú ina chunk féin, a bhailítear nuair an bhabhta `/admin` a thugann an úsáideoir.

## Lazy-loading grúpa slígheanna

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

`loadChildren` a ghealadh go fadréadach limistéar gné iomlán (gach a slígheanna/comhpháirt) mar ghiotán amháin — an bealach caighdeánach chun app mór a roinnt de réir gné.

## An fhoirm bhunaithe ar NgModule (seanchodbhasanna)

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

## Cén fáth a fhéachann sé an fheidhmíochtas

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

Ní dhíoladh úsáideoirí ach an méid a thugann siad ar cuairt go fírinneach — tábhachtach do mhór-iarratas fiontraigheachta le go leor réimsí gné, ar a lán nach n-osclaíonn úsáideoir ar bith riamh.

## Straitéisí réamhualaithe (an dea-shaineolaí de dhá rogha)

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

Ualaíonn réamhualadh giotáin lazy sa chúlra tar éis an app a ghealadh, ionas go bhfanann an bundle tosaigh beag *agus* mothraíonn an nascleanúint níos déanaí go tobann. Is féidir leat straitéisí saincheaptha a scríobh freisin (m.sh. réamhualadh a dhéanamh ar shlígheanna atá dóchúil a bheith ann).

## Cén fáth a bhíonn tábhacht ann

Is é lazy loading an phríomh-thacaíocht chun bundle tosaigh Angular a choimeád beag de réir mar a fhásann an app — riachtanach do na mór-iarratas fiontraigheachta iomadúla-gné a spriocanna Angular.

Roinnt de réir slí/gné (`loadComponent`/`loadChildren`) a chiallaíonn chéad ualaí níos tapa, agus péire le straitéis réamhualaithe tugann tú tosaigh tapa agus nascleanúint snappy.

Is é an cleachtas caighdeánach, ard-thionchar feidhmíochta in aon iarratas Angular foluaineach.