ਤੁਸੀਂ Angular ਵਿੱਚ routes/features ਨੂੰ lazy-load ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

Question

Accepted Answer

**Lazy loading** ਇੱਕ feature ਦੇ code ਨੂੰ download ਕਰਨਾ ਉਦੋਂ ਤਕ ਮੁਲਤਵੀ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤਕ ਉਪਯੋਗਕਾਰ ਇਸ ਤੱਕ navigate ਨਹੀਂ ਕਰਦਾ, ਸਭ ਕੁਝ ਸ਼ੁਰੂਆਤੀ download ਵਿੱਚ bundle ਕਰਨ ਦੀ ਬਜਾਏ। ਇਹ ਸ਼ੁਰੂਆਤੀ bundle ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ ਅਤੇ ਐਪ ਦੇ ਪਹਿਲੇ load ਨੂੰ ਤੇਜ਼ ਕਰਦਾ ਹੈ।

## Standalone component ਦਾ lazy-loading (ਆਧੁਨਿਕ)

```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 ਵਿੱਚ ਵਿਭਾਜਿਤ ਕਰਨ ਲਈ ਦੱਸਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਸਿਰਫ ਉਦੋਂ download ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਉਪਯੋਗਕਾਰ `/admin` ਤੇ visit ਕਰਦਾ ਹੈ।

## Routes ਦੇ ਇੱਕ ਸਮੂਹ ਦਾ lazy-loading

```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 ਕਰਦਾ ਹੈ — ਇੱਕ ਵੱਡੀ ਐਪ ਨੂੰ feature ਦੁਆਰਾ ਵਿਭਾਜਿਤ ਕਰਨ ਦਾ ਮਾਨਕ ਤਰੀਕਾ।

## NgModule-ਆਧਾਰਿਤ ਫਾਰਮ (ਪੁਰਾਣੇ codebases)

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

## ਇਹ ਕਾਰਕੁਸ਼ਲਤਾ ਨੂੰ ਕਿਵੇਂ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ

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

ਉਪਯੋਗਕਾਰ ਸਿਰਫ ਉਹ ਕੁਝ ਡਾਊਨਲੋਡ ਕਰਦੇ ਹਨ ਜਿਸ ਨੂੰ ਉਹ ਅਸਲ ਵਿੱਚ visit ਕਰਦੇ ਹਨ — ਵੱਡੀ enterprise apps ਲਈ ਮਹੱਤਵਪੂਰਨ ਜਿਨ੍ਹਾਂ ਦੇ ਬਹੁਤ ਸਾਰੇ feature areas ਹਨ, ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਬਹੁਤ ਸਾਰੇ ਕੋਈ ਦਿੱਤਾ ਹੋਇਆ ਉਪਯੋਗਕਾਰ ਕਦੇ ਨਹੀਂ ਖੋਲਦਾ।

## Preloading strategies (ਦੋਨਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਵਧੀਆ)

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

Preloading ਐਪ ਲਦਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਪ੍ਰਸ਼ਾਸਨ ਮਾਪ ਦੇ ਆਧਾਰ ਤੇ lazy chunks ਨੂੰ fetch ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਸ਼ੁਰੂਆਤੀ bundle ਛੋਟਾ ਰਹਿੰਦਾ ਹੈ *ਅਤੇ* ਬਾਅਦ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਤੁਰੰਤ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ custom strategies ਵੀ ਲਿਖ ਸਕਦੇ ਹੋ (ਜਿਵੇਂ ਸਿਰਫ likely-next routes ਨੂੰ preload ਕਰਨਾ)।

## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Lazy loading ਐਪ ਦੇ ਵਧਣ ਦੇ ਨਾਲ Angular ਦੇ ਸ਼ੁਰੂਆਤੀ bundle ਨੂੰ ਛੋਟਾ ਰੱਖਣ ਦੀ ਪ੍ਰਾਇਮਰੀ ਤਕਨੀਕ ਹੈ — ਵੱਡੀ, multi-feature enterprise apps ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਜਿਸ ਨੂੰ Angular target ਕਰਦਾ ਹੈ।

Route/feature ਦੁਆਰਾ ਵਿਭਾਜਿਤ ਕਰਨਾ (`loadComponent`/`loadChildren`) ਦਾ ਮਤਲਬ ਹੈ ਤੇਜ਼ ਪਹਿਲੇ loads, ਅਤੇ preloading strategy ਦੇ ਨਾਲ ਜੋਡ਼ੀ ਜਾਂਦੀ ਹੈ ਜੋ ਇੱਕ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਅਤੇ snappy navigation ਦੋਵੇਂ ਦਿੰਦੀ ਹੈ।

ਇਹ ਕਿਸੇ ਵੀ ਮਾਪ ਦੀ Angular application ਵਿੱਚ ਇੱਕ ਮਾਨਕ, high-impact ਕਾਰਕੁਸ਼ਲਤਾ ਅਭਿਆਸ ਹੈ।