Angular'da rotaları/özellikleri nasıl lazy-load edersiniz?

Question

Accepted Answer

**Lazy loading**, bir özelliğin kodunun indirilmesini, kullanıcı ona gitene kadar erteleler; bunun yerine her şeyi ilk indirmeye dahil etmek yerine. Bu, ilk bundle'ı küçültür ve uygulamanın ilk yüklemesini hızlandırır.

## Bağımsız bir bileşeni lazy-load etmek (modern)

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

Dinamik `import()`, derleme aracına `AdminComponent`'i kendi chunk'ına ayırmasını söyler; bu, kullanıcı `/admin`'i ziyaret ettiğinde indirilir.

## Bir dizi rotayı lazy-load etmek

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

`loadChildren`, tüm bir özellik alanını (tüm rotaları/bileşenleri) tek bir chunk olarak lazy-load eder — büyük bir uygulamayı özelliklere göre bölmenin standart yoludur.

## NgModule tabanlı form (eski kod tabanları)

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

## Performansı neden iyileştirir

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

Kullanıcılar yalnızca aslında ziyaret ettikleri şeyleri indirir — birçok özellik alanına sahip ve verilen bir kullanıcının çoğunu hiç açmadığı büyük kurumsal uygulamalar için kritik.

## Ön yükleme stratejileri (her ikisinin de en iyisi)

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

Ön yükleme, uygulama yüklendikten sonra arka planda lazy chunk'ları getirir; bu sayede ilk bundle küçük kalır *ve* sonraki gezinti anında hissedilir. Özel stratejiler de yazabilirsiniz (örn. yalnızca muhtemel sonraki rotaları önceden yükleyin).

## ## Neden önemli

Lazy loading, Angular'ın ilk bundle'ını uygulama büyüdükçe küçük tutmanın birincil tekniğidir — Angular'ın hedeflediği büyük, çok özellikli kurumsal uygulamalar için zorunludur.

Rota/özelliğe göre bölme (`loadComponent`/`loadChildren`), daha hızlı ilk yüklemeler anlamına gelir; ön yükleme stratejisiyle eşleştirildiğinde, hem hızlı başlangıç hem de akıcı gezinti sağlar.

Bu, uygun ölçekteki herhangi bir Angular uygulamasında standart, yüksek etkili bir performans uygulamasıdır.