Si mund të bësh lazy-loading të rrugëve/veçorive në Angular?

Question

Accepted Answer

**Lazy loading** shtyn shkarkimin e kodit të një veçorie derisa përdoruesi të navigojë në të, në vend që të rimbushë gjithçka në shkarkimin fillestar. Kjo zvogëlon paketën fillestar dhe përshpejton ngarkimin e parë të aplikacionit.

## Lazy-loading i një komponente të pavarur (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),
  },
];
```

Dinamika `import()` thotë mjetit të ndërtimit të ndajë `AdminComponent` në chunk-in e vet, i cili shkarkohet vetëm kur përdoruesi viziton `/admin`.

## Lazy-loading i një grupi rrugësh

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

`loadChildren` bën lazy-loading të të gjithë zonës së veçorisë (të gjitha rrugët/komponentët e saj) si një chunk — mënyra standarde për të ndarë një aplikacion të madh sipas veçorisë.

## Forma e bazuar në NgModule (codebases më të vjetër)

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

## Pse përmirëson performancën

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

Përdoruesit shkarkojnë vetëm atë që ata në fakt vizitojnë — kritik për aplikacionet e mëdha të ndërmarrjes me shumë zona veçorish, shumica e të cilave një përdorues i caktuar kurrë nuk hap.

## Strategjitë e paraloadit (më e mirja e të dyjave)

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

Paraloadimi merr chunke lazy-load në sfondin pasi aplikacioni ngarkohet, kështu që paketa fillestar mbetet e vogël *dhe* navigacioni më vonë ndjehet i menjëhershëm. Ju mund të shkruani gjithashtu strategji të personalizuara (p.sh. paraloadoni vetëm rrugët e mundshme të ardhshme).

## Pse ka rëndësi

Lazy loading është teknika parësore për të mbajtur paketën fillestar të Angular të vogël ndërsa aplikacioni rritet — thelbësor për aplikacionet e mëdha të ndërmarrjes me shumë veçori, që Angular synon.

Ndarja sipas rrugës/veçorisë (`loadComponent`/`loadChildren`) do të thotë ngarkesa më të shpejta në fillim, dhe çiftim me një strategji paraloadimi jep si një fillim të shpejtë ashtu edhe navigacion të lëvizshëm.

Ishte praktikë standarde, me ndikim të lartë të performancës në çdo aplikacion Angular të konsiderueshëm.