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` ஐ அதன் சொந்த chunk இல் பிரிக்க சொல்கிறது, பயனாளர் `/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` முழு பிறகுவரும் பகுதியை (அதன் அனைத்து பாதைகள்/கூறுபகுதிகள்) ஒரு chunk ஆக 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 chunks ஐ பெறுகிறது, எனவே ஆரம்ப மற்றும் குறிஞ்சம் பிறகு வழிநடத்தல் உடனே உணர்கிறது. நீங்கள் தனிப்பட்ட கொள்கைகளையும் எழுத முடியும் (உ.ம் மட்டும் நிகழ்வுகளாக அடுத்த பாதைகளை முற்குறிப்பிடு).

## ஏன் இது முக்கியமாக உள்ளது

Lazy loading Angular ன் ஆரம்ப மற்றும் சிறியதாக இருக்க விரும்புகையில் பயன்பாட்டு வளரும் தொடக்க முறைய — பல்வேறு பிறகுவரும் எন்டারப்राइஸ் பயன்பாடுகளுக்கு உறுதியாக செயல்படுகிறது.

பாதை/பிறகுவரும் மூலம் பிரிப்பு (`loadComponent`/`loadChildren`) வேகமான முதல் ஏற்றிய பொருள், முற்குறிப்பிடு கொள்கையுடன் பிணைய முடியை விரைவான தொடக்கமும் உணர்தல் பாதையும் கொடுக்கிறது.

இது ஒரு மாறமான, பெரிய-செயல்திறன் நடைமுறை எந்த நிறுவன-அளவு Angular பயன்பாட்டில்.