आप Angular में रूट्स/फीचर्स को लेज़ी-लोड कैसे करते हैं?

Question

Accepted Answer

**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()` बिल्ड टूल को `AdminComponent` को अपने स्वयं के चंक में विभाजित करने के लिए कहता है, जिसे केवल तब डाउनलोड किया जाता है जब उपयोगकर्ता `/admin` पर जाता है।

## रूट्स के एक समूह को लेज़ी-लोड करना

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

`loadChildren` एक संपूर्ण फीचर क्षेत्र (इसके सभी रूट्स/कंपोनेंट्स) को एक ही चंक के रूप में लेज़ी-लोड करता है — एक बड़ी एप्लिकेशन को फीचर द्वारा विभाजित करने का मानक तरीका।

## NgModule-आधारित फॉर्म (पुरानी कोडबेस)

```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
```

उपयोगकर्ता केवल वह ही डाउनलोड करते हैं जो वे वास्तव में देखते हैं — बड़ी एंटरप्राइज़ ऐप्स के लिए महत्वपूर्ण जिनमें कई फीचर क्षेत्र हैं, जिनमें से अधिकांश को कोई दिया गया उपयोगकर्ता कभी नहीं खोलता है।

## पूर्वलोडिंग रणनीतियाँ (दोनों का सर्वश्रेष्ठ)

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

पूर्वलोडिंग एप्लिकेशन लोड होने के बाद पृष्ठभूमि में लेज़ी चंक्स को लाता है, इसलिए प्रारंभिक बंडल छोटा रहता है *और* बाद का नेविगेशन तत्काल महसूस होता है। आप कस्टम रणनीतियाँ भी लिख सकते हैं (उदा. केवल संभावित-अगले रूट्स को पूर्वलोड करें)।

## यह महत्वपूर्ण क्यों है

Lazy loading Angular के प्रारंभिक बंडल को छोटा रखने की प्राथमिक तकनीक है क्योंकि एप्लिकेशन बढ़ता है — बड़ी, बहु-फीचर एंटरप्राइज़ ऐप्स के लिए आवश्यक जो Angular लक्षित करता है।

रूट/फीचर द्वारा विभाजन (`loadComponent`/`loadChildren`) तेज़ पहले लोड का मतलब है, और पूर्वलोडिंग रणनीति के साथ जोड़ी गई दोनों तेज़ शुरुआत और तीव्र नेविगेशन देती है।

यह किसी भी सार्थक Angular एप्लिकेशन में एक मानक, उच्च-प्रभाव कार्यप्रवाह अभ्यास है।