Angular मध्ये मार्ग/वैशिष्ट्य कसे आळस म्हणून लोड करायचे?

Question

Accepted Answer

**Lazy loading** वापरकर्ता त्याकडे नेव्हिगेट करेपर्यंत फीचरचा कोड डाउनलोड करणे स्थगित करते, सर्वकाही प्रारंभिक डाउनलोडमध्ये बंडल करण्याऐवजी. हे प्रारंभिक बंडल कमी करते आणि अ‍ॅपचा पहिला लोड वेग वाढवते.

## Standalone घटक आळसपणे लोड करणे (आधुनिक)

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

वापरकर्त्यांना फक्त ते वास्तविकपणे भेट देतात तेच डाउनलोड होते — मोठ्या एंटरप्राइজ अ‍ॅप्सच्या लिए महत्त्वाचे आहे ज्यांचे अनेक फीचर क्षेत्र आहेत, ज्यापैकी बहुतेक दिलेल्या वापरकर्त्याने कधीही उघडत नाहीत.

## Preloading रणनीती (दोन्हीचा सर्वश्रेष्ठ)

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

Preloading अ‍ॅप लोड झाल्यानंतर पार्श्वभूमीत आळस चंक पुन्हा प्राप्त करते, त्यामुळे प्रारंभिक बंडल लहान राहते *आणि* नंतरचे नेव्हिगेशन तात्कालिक वाटते. तुम्ही कस्टम रणनीती देखील लिहू शकता (उदा. केवळ संभाव्य-पुढील मार्गांचे preload करा).

## हे महत्त्वाचे का आहे

Lazy loading हे Angular च्या प्रारंभिक बंडलला अ‍ॅप वाढत असताना लहान ठेवण्याचे प्राथमिक तंत्र आहे — मोठ्या, मल्टी-फीचर एंटरप्राइज अ‍ॅप्सच्या लिए अत्यावश्यक आहे ज्याचे Angular लक्ष्य आहे.

मार्ग/फीचरद्वारे विभाजन (`loadComponent`/`loadChildren`) म्हणजे वेगवान पहिले लोड, आणि preloading रणनीतीसह जोडल्यास त्वरित प्रारंभ आणि झटपट नेव्हिगेशन दोन्ही मिळते.

हे कोणत्याही पर्याप्त आकाराच्या Angular अ‍ॅपलिकेशनमध्ये एक मानक, उच्च-प्रभाव कार्यक्षमता सराव आहे.