Πώς κάνετε lazy-load δρομολογίων/δυνατοτήτων στο Angular;

Question

Accepted Answer

**Το Lazy Loading** αναβάλλει τη λήψη του κώδικα μιας δυνατότητας μέχρι ο χρήστης να πλοηγηθεί σε αυτή, αντί να δεσμεύει όλα τα στοιχεία στη δυσμενέστερη λήψη. Αυτό μειώνει το αρχικό bundle και επιταχύνει την πρώτη φόρτωση της εφαρμογής.

## 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()` λέει στο εργαλείο build να χωρίσει το `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` lazy-load ολόκληρη τη δυνατότητα (όλες τις δρομολογίες/στοιχεία) ως ένα chunk — ο τυπικός τρόπος για να χωρίσετε μια μεγάλη εφαρμογή κατά δυνατότητα.

## Η μορφή βασισμένη σε 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
```

Η προεπιφόρτωση φορτώνει χαλαρά chunks στο παρασκήνιο αφού φορτωθεί η εφαρμογή, οπότε το αρχικό bundle παραμένει μικρό *και* η μεταγενέστερη πλοήγηση αισθάνεται στιγμιαία. Μπορείτε επίσης να γράψετε προσαρμοσμένες στρατηγικές (π.χ. προεπιφόρτωση μόνο πιθανών επόμενων δρομολογίων).

## Γιατί παίζει σημαντικό ρόλο

Το Lazy loading είναι η κύρια τεχνική για να διατηρείται το αρχικό bundle του Angular μικρό καθώς μεγαλώνει η εφαρμογή — απαραίτητο για τις μεγάλες, πολλαπλές δυνατότητες εταιρικές εφαρμογές που στοχεύει το Angular.

Το χωρισμό κατά δρομολόγιο/δυνατότητα (`loadComponent`/`loadChildren`) σημαίνει ταχύτερες αρχικές φορτώσεις, και συνδυάζοντας με μια στρατηγική προεπιφόρτωσης δίνει τόσο γρήγορη εκκίνηση όσο και ευχάριστη πλοήγηση.

Είναι μια τυπική, υψηλής επιπτώσεως πρακτική απόδοσης σε οποιαδήποτε σημαντική εφαρμογή Angular.