Kuinka vaivihkaisen lataat reitit/ominaisuudet Angularissa?

Question

Accepted Answer

**Vaivihkainen lataus** viivästyttää ominaisuuden koodin lataamista siihen asti, kunnes käyttäjä siirtyy siihen, sen sijaan että kaikki niputtaisiin alkuperäiseen lataukseen. Tämä pienentää alkuperäisen paketin kokoa ja nopeuttaa sovelluksen ensimmäistä lataamista.

## Itsenäisen komponentin vaivihkainen lataus (moderni)

```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),
  },
];
```

Dynaaminen `import()` kertoo rakennustyökalulle jakaa `AdminComponent` omaksi paloikseen, joka ladataan vain kun käyttäjä vierailee `/admin`-osoitteessa.

## Reittiryhmän vaivihkainen lataus

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

`loadChildren` lataa vaivihkaisesti koko ominaisuusalueen (kaikki sen reitit/komponentit) yhtenä palona — vakiotapa jakaa iso sovellus ominaisuuksittain.

## NgModule-pohjainen muoto (vanhemmat koodikannat)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Miksi se parantaa suorituskykyä

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Käyttäjät lataavat vain sen, mitä he todella käyvät katsomassa — kriittistä suurille yrityssovelluksille, joissa on monia ominaisuusalueita, joita useimmat käyttäjät eivät koskaan avaa.

## Esivalaistustrategiat (molemmin puolin parhaat)

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

Esivalistus hakee vaivihkaisia paloja taustalla sovelluksen latautumisen jälkeen, joten alkuperäinen paketti pysyy pienenä *ja* myöhempi navigointi tuntuu välittömältä. Voit myös kirjoittaa mukautettuja strategioita (esim. esivalista vain todennäköiset seuraavat reitit).

## Miksi se on tärkeää

Vaivihkainen lataus on ensisijainen tekniikka Angularin alkuperäisen paketin pienyyden säilyttämiseksi sovelluksen kasvaessa — välttämätöntä suurille, monista ominaisuuksista muodostuville yrityssovelluksille, joita Angular kohdistaa.

Reitin/ominaisuuden mukainen jakaminen (`loadComponent`/`loadChildren`) tarkoittaa nopeampia alkuisia latauksia, ja yhdistäminen esivalaisustrategiaan antaa sekä nopean käynnistyksen että sujuvan navigoinnin.

Se on vakio-, korkean vaikutuksen suorituskäytäntö missä tahansa merkittävässä Angular-sovelluksessa.