તમે Angular માં રૂટ્સ/ફીચર્સને આલસીપણે કેવી રીતે લોડ કરો છો?

Question

Accepted Answer

**Lazy loading** વપરાશકર્તા તેમાં નેવિગેટ કરે ત્યાં સુધી ફીચરના કોડને ડાউનલોડ કરવાને મોકૂફ કરે છે, બદલે તમામ કોઈ પણ શરૂઆતી ડાউનલોડમાં બંડલ કરવાની જગાએ. આ શરૂઆતી બંડલને સંકોચે છે અને અયપ્પની પ્રથમ લોડને ઝડપ આપે છે.

## 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`ની મુલાકાત લે ત્યારે ડાઉનલોડ કરવામાં આવે છે.

## 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` એક સમગ્ર ફીચર વિસ્તારને (તેના તમામ રૂટ્સ/સમીકરણો) એક ભાગ તરીકે આલસીપણે લોડ કરે છે — એક મોટી એપ્લીકેશનને ફીચર દ્વારા વિભાજિત કરવાનો માનક રસ્તો.

## 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 એપ્લીકેશનમાં એક માનક, ઉચ્ચ-અસર કામગીરી પ્રણાલી છે.