Angular లో రూట్‌లు/ఫీచర్‌ల యొక్క lazy-loading ను ఎలా చేస్తారు?

Question

Accepted Answer

**Lazy loading** ఒక ఫీచర్ కోడ్‌ను డౌన్‌లోడ్‌ చేయడం వాయిదా వేస్తుంది, వాడుకరి దానికి నావిగేట్ చేసే వరకు, ప్రారంభిక డౌన్‌లోడ్‌లో ప్రతిదీ చేర్చకుండా. ఇది ప్రారంభ బండిల్‌ను తగ్గిస్తుంది మరియు యాప్ యొక్క మొదటి లోడ్‌ను వేగవంతం చేస్తుంది.

## స్టాండ్‌అలోన్ కాంపోనెంట్ యొక్క 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`ను సందర్శించినప్పుడు మాత్రమే డౌన్‌లోడ్ చేయబడుతుంది.

## రూట్‌ల సమూహం యొక్క 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` మొత్తం ఫీచర్ ఎరియాను (దాని అన్ని రూట్‌లు/కాంపోనెంట్‌లు) ఒక చంక్‌గా lazy-load చేస్తుంది — పెద్ద యాప్‌ను ఫీచర్‌ ద్వారా విభజించే ప్రామాణిక మార్గం.

## 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 చంక్‌లను చేస్తుంది, తద్వారా ప్రారంభ బండిల్ చిన్నదుగా ఉంటుంది *మరియు* తరువాత నేవిగేషన్ తక్షణమైనంగా అనిపిస్తుంది. మీరు కస్టమ్ స్ట్రాటేజీలను కూడా ఉపయోగించవచ్చు (ఉదాహరణకు, సంభావ్య-తరువాతి రూట్‌లను మాత్రమే పూర్వపేలుట్ చేయండి).

## ఇది ఎందుకు ముఖ్యమైనది

Lazy loading అనేది Angular యొక్క ప్రారంభ బండిల్‌ను చిన్నదిగా ఉంచడానికి ప్రాథమిక పద్ధతి, ఇది యాప్ పెరిగేకొద్దీ — Angular లక్ష్యంగా చేసిన పెద్ద, బహુ-ఫీచర్ ఎంటర్‌ప్రైజ్ యాప్‌ల కోసం అవసరం.

రూట్/ఫీచర్ (`loadComponent`/`loadChildren`) ద్వారా విభజించడం అంటే మొదటి లోడ్‌లు వేగవంతమైనవి, మరియు పూర్వపేలుట్ స్ట్రాటేజీ తో జత చేయడం ఎరుపు రంగు ప్రారంభం మరియు చిక్కని నేవిగేషన్ రెండింటినీ ఇస్తుంది.

ఇది ఏదైనా సిజేబుల్ Angular యాప్‌లికేషన్‌లో ప్రామాణిక, ఎక్కువ-ప్రభావ్ పనితీరు సాధన.