Angular मा तपाईंले routes/features को lazy-load कसरी गर्नुहुन्छ?

Question

Accepted Answer

**Lazy loading** ले user ले navigate गर्दा सम्म feature को code download गर्न स्थगित गर्छ, सबै कुरा initial download मा bundle गर्नुको सट्टा। यसले initial bundle सिकुर गर्छ र app को first 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),
  },
];
```

डायनामिक `import()` ले build tool लाई `AdminComponent` लाई आफ्नै chunk मा विभाजित गर्न भन्छ, जो user ले `/admin` मा visit गर्दा मात्र download हुन्छ।

## 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 गर्छ — large app लाई feature अनुसार विभाजित गर्ने standard तरिका।

## NgModule-based 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
```

Users ले केवल जो कुरा तिनीहरूले वास्तवमा visit गर्छन् त्यो मात्र download गर्छन् — large enterprise apps को लागि जो धेरै feature areas छन्, जसमध्ये अधिकांश दिइएको user कहिल्यै खोल्दैन।

## Preloading strategies (दुवैको सर्वश्रेष्ठ)

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

Preloading ले app लोड भएपछी background मा lazy chunks fetch गर्छ, त्यसैले initial bundle साना रहन्छन् *र* पछिको navigation तत्काल महसुस हुन्छ। तपाईंले custom strategies लेख्न सक्नुहुन्छ (जस्तै केवल likely-next routes preload गर्नुहोस्)।

## किन यो महत्त्वपूर्ण छ

Lazy loading Angular को initial bundle सिकुर राख्ने primary technique हो जब app बढ्छ — large, multi-feature enterprise apps को लागि आवश्यक हो जो Angular target गर्छ।

Route/feature द्वारा विभाजित गर्नु (`loadComponent`/`loadChildren`) को अर्थ छ छिटो first loads, र preloading strategy सँग जोडी गर्नु को अर्थ दुवै quick start र snappy navigation दुवै दिन्छ।

यो कुनै पनि सिकुर Angular application मा standard, high-impact performance practice हो।