آپ Angular میں routes/features کو lazy-load کیسے کرتے ہیں؟

Question

Accepted Answer

**Lazy loading** کسی feature کے code کو صارف کے اس تک navigate کرنے تک download کرنے میں تاخیر کرتا ہے، بجائے اس کے کہ سب کچھ ابتدائی download میں bundle کیا جائے۔ یہ ابتدائی bundle کو سکڑتا ہے اور app کے پہلے load کو تیز کرتا ہے۔

## standalone component کو Lazy-load کرنا (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),
  },
];
```

Dynamic `import()` build tool کو `AdminComponent` کو اپنے chunk میں split کرنے کے لیے کہتا ہے، جو صرف اس وقت download ہوتا ہے جب صارف `/admin` پر جائے۔

## routes کے ایک group کو Lazy-load کرنا

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

`loadChildren` ایک پورے feature area (اس کے تمام routes/components) کو ایک chunk کے طور پر lazy-load کرتا ہے — یہ ایک بڑی app کو feature کے لحاظ سے split کرنے کا معیاری طریقہ ہے۔

## NgModule پر مبنی form (پرانے codebases)

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

## یہ performance کو کیوں بہتر بناتا ہے

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

صارفین صرف وہی download کرتے ہیں جو وہ اصل میں دیکھتے ہیں — بہت سارے feature areas والی بڑی enterprise apps کے لیے اہم، جن میں سے زیادہ تر ایک دیے گئے صارف کبھی نہیں کھولتے۔

## Preloading strategies (دونوں کا بہترین)

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

Preloading app کے load ہونے کے بعد پس منظر میں lazy chunks کو fetch کرتا ہے، تاکہ ابتدائی bundle چھوٹا رہے *اور* بعد میں navigation فوری محسوس ہو۔ آپ custom strategies بھی لکھ سکتے ہیں (مثال کے طور پر صرف ممکنہ اگلے routes کو preload کریں)۔

## اس کی اہمیت

Lazy loading Angular کے ابتدائی bundle کو چھوٹا رکھنے کا بنیادی طریقہ ہے جیسے جیسے app بڑا ہوتا ہے — بہت سارے features والی بڑی enterprise apps کے لیے ضروری ہے۔

Route/feature کے لحاظ سے splitting (`loadComponent`/`loadChildren`) کا مطلب ہے تیز پہلے load، اور ایک preloading strategy کے ساتھ یکجا کرنے سے تیز شروعات اور تیز navigation دونوں ملتے ہیں۔

یہ کسی بھی قابل قدر Angular application میں ایک معیاری، اعلیٰ اثر والی performance practice ہے۔