როგორ ხდება ნელი დატვირთვა route/feature-ების Angular-ში?

Question

Accepted Answer

**ნელი დატვირთვა** აჩქარებს feature-ის კოდის ჩამოწერას სანამ მომხმარებელი მას ნავიგაციაში არ მივიდეს, იმის ნაცვლად, რომ ყველაფერი საწყის ჩამოწერაში შედიოს. ეს შეამცირებს საწყო ბუნდელს და აჩქარებს აპლიკაციის პირველ ჩატვირთვას.

## 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()` აუწყებს build ხელსაწყოს, რომ `AdminComponent` თავის ბლოკში გამოყოს და ჩამოწერა მოხდეს მხოლოდ მაშინ, როცა მომხმარებელი `/admin`-ზე მივა.

## route-ების ჯგუფის ნელი დატვირთვა

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

`loadChildren` ნელი დატვირთვით ატვირთვის feature-ის მთელ არეს (ყველა route-ი/კომპონენტი) ერთი ბლოკის სახით — ეს არის სტანდარტული გზა დიდი აპლიკაციის feature-ების მიხედვით გამოსაყოფად.

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

მომხმარებელი ჩამოწერს მხოლოდ იმას, რაც ის რეალურად უვიზიტებს — ეს გადამწყვეტია დიდი საწარმო აპლიკაციებისთვის, რომლებიც მრავალი feature-ის არეისაგან შედგებიან, რომელთა უმეტესობას მოცემული მომხმარებელი არასოდეს აღმოჩენს.

## Preloading სტრატეგიები (ორივეს უპირატესობა)

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

Preloading ჩამოწერს ნელი ბლოკებს ფონზე აპლიკაციის ჩატვირთვის შემდეგ, ასე რომ საწყო ბუნდელი პატარა რჩება *და* შემდგომი ნავიგაცია მყისიერი ჩანს. თქვენ შეგიძლიათ თავად დაწეროთ მორგებული სტრატეგიები (მაგ. შემდეგი ალბათი route-ების მხოლოდ preloading).

## რატომ არის ეს მნიშვნელოვანი

ნელი დატვირთვა არის პირველადი ტექნიკა Angular-ის საწყო ბუნდელის პატარად დასაზღვრისთვის აპლიკაციის ზრდის დროს — აუცილებელი დიდი, მრავალფუნქციო საწარმო აპლიკაციებისთვის, რომელიც Angular მიმართავს.

გაყოფა route/feature-ის მიხედვით (`loadComponent`/`loadChildren`) ნიშნავს უფრო სწრაფ პირველ დატვირთვას, და preloading სტრატეგიასთან შერწყმა იძლევა როგორც სწრაფ დასაწყებს, ისე მოსახერხებელ ნავიგაციას.

ეს არის სტანდარტული, მაღალი ზეგავლენის მქონე პერფორმანს პრაქტიკა ნებისმიერ დიდ Angular აპლიკაციაში.