Angular Uygulamalarında Lazy Loading Rotaları Nasıl Kullanılır?

Angular Uygulamalarında Lazy Loading Rotaları Nasıl Kullanılır?

Angular, modern web uygulamaları geliştirmek için güçlü ve popüler bir çerçevedir. Büyük ölçekli ve özellik açısından zengin uygulamalar oluştururken karşılaşılan en önemli zorluklardan biri, uygulamanın başlangıç yükleme süresini optimize etmektir. Kullanıcılar, hızlı açılan ve anında yanıt veren uygulamaları tercih eder. İşte tam bu noktada “Lazy Loading” (Tembel Yükleme) devreye girer ve Angular uygulamalarının performansını önemli ölçüde artırır. Bu makalede, Angular’da lazy loading rotalarını nasıl kullanacağımızı, faydalarını, teknik detaylarını ve en iyi uygulama yöntemlerini derinlemesine inceleyeceğiz.

Angular Uygulamalarında Performans Sorunları ve Lazy Loading’in Rolü

Geleneksel olarak, bir web uygulaması başlatıldığında, tüm uygulama kodu, bileşenleri, modülleri ve bağımlılıkları tek bir büyük JavaScript paketi (bundle) halinde tarayıcıya yüklenir. Bu yaklaşım, küçük uygulamalar için sorun teşkil etmezken, özellikler eklendikçe ve uygulama büyüdükçe ciddi performans sorunlarına yol açabilir:

* Yüksek Başlangıç Yükleme Süresi: Kullanıcılar, uygulamanın ilk açılışında tüm paketin indirilmesini beklemek zorunda kalır. Bu durum, özellikle yavaş internet bağlantılarında veya mobil cihazlarda kötü bir kullanıcı deneyimine neden olur.
* Büyük Paket Boyutu: Tüm kodun tek bir pakette olması, dosya boyutunun artmasına ve dolayısıyla ağ üzerinden aktarım süresinin uzamasına neden olur.
* Gereksiz Kaynak Tüketimi: Kullanıcının o anda ihtiyaç duymadığı veya hiç kullanmayacağı kod parçaları bile başlangıçta yüklenir. Bu, hem bant genişliğini hem de tarayıcının belleğini gereksiz yere tüketir.

Lazy loading, bu sorunlara zarif bir çözüm sunar. Temel fikir, uygulamanın tüm bölümlerini başlangıçta yüklemek yerine, yalnızca kullanıcının o anda ihtiyaç duyduğu veya talep ettiği modülleri yüklemektir. Bu, uygulamanın başlangıç paket boyutunu önemli ölçüde azaltır ve ilk yükleme süresini hızlandırır.

Lazy Loading Nedir?

Lazy loading, bir web uygulamasının belirli bölümlerinin (genellikle modüllerin) yalnızca ihtiyaç duyulduğunda, yani kullanıcı ilgili rotaya navigasyon yaptığında yüklenmesi prensibidir. Angular bağlamında, bu, Angular Router’ın belirli bir rotaya gidildiğinde ilgili modülü dinamik olarak yüklemesini sağlamak anlamına gelir.

Tarayıcı, lazy loading ile yapılandırılmış bir Angular uygulamasını ilk başlattığında, yalnızca uygulamanın çekirdek (core) modülü ve başlangıç rotaları için gerekli olan kod paketini indirir. Diğer tüm özellik modülleri ayrı JavaScript paketlerine bölünür ve bu paketler, kullanıcı ilgili özellik modülüne yönlendirildiğinde arka planda indirilir. Bu işlem, kullanıcı arayüzünün daha hızlı görünmesini ve uygulamanın daha duyarlı hissetmesini sağlar.

Lazy Loading’in Avantajları

Lazy loading kullanmanın Angular uygulamalarınıza sağladığı temel avantajlar şunlardır:

Daha Hızlı Başlangıç Süresi

Uygulamanın başlangıçta yüklemesi gereken kod miktarı azaldığı için, tarayıcı daha az veri indirir ve daha kısa sürede uygulamayı başlatır. Bu, özellikle ilk izlenim açısından kritik öneme sahiptir.

Daha Küçük Başlangıç Paket Boyutu

Lazy loading, uygulamanın genel paket boyutunu değiştirmez ancak başlangıçta indirilen paketin boyutunu küçültür. Bu, daha hızlı ağ aktarımı ve daha az bant genişliği kullanımı anlamına gelir.

Geliştirilmiş Kullanıcı Deneyimi

Kullanıcılar, uygulamanın anında yanıt verdiğini ve hızlı yüklendiğini gördüklerinde daha olumlu bir deneyim yaşarlar. Bekleme sürelerinin azalması, kullanıcı memnuniyetini artırır.

Kaynak Kullanımının Optimizasyonu

Yalnızca ihtiyaç duyulan kodun yüklenmesi, tarayıcının belleğini ve işlem gücünü daha verimli kullanmasını sağlar. Bu, özellikle kaynakları sınırlı olan cihazlarda veya çok sayıda sekmenin açık olduğu durumlarda faydalıdır.

Modülerlik ve Bakım Kolaylığı

Lazy loading, uygulamanızı daha küçük, bağımsız modüllere ayırmayı teşvik eder. Bu modüler yapı, kodun daha düzenli olmasını, geliştirmenin ve bakımın kolaylaşmasını sağlar. Her bir modül kendi içinde daha yönetilebilir hale gelir.

Lazy Loading Nasıl Çalışır?

Angular’da lazy loading, Angular Router ve modern JavaScript’in dinamik import (ES2020 standardı) özelliği sayesinde gerçekleşir.

1. Router Yapılandırması: Angular Router, bir rotanın loadChildren özelliği ile yapılandırıldığında, bu rotaya gidildiğinde ilgili modülü dinamik olarak yüklemesi gerektiğini anlar.
2. Dinamik Import: loadChildren özelliği, bir Promise döndüren bir fonksiyon alır. Bu fonksiyon içinde import() sözdizimi kullanılır. Örneğin: import('./path/to/module/module.module').then(m => m.ModuleName). Bu import() ifadesi, belirtilen modülü ayrı bir JavaScript dosyası olarak yükler.
3. Webpack’in Rolü (Code Splitting): Geliştirme sürecinde, Angular CLI ve altında yatan Webpack (veya Vite gibi diğer bundler’lar), import() ifadelerini algılar ve bu modülleri ana uygulama paketinden ayırarak ayrı JavaScript paketleri (chunk’lar) halinde derler. Bu işleme “code splitting” denir.
4. Talep Üzerine Yükleme: Kullanıcı, lazy loading ile yapılandırılmış bir rotaya navigasyon yaptığında, Angular Router, ilgili modülün paketini sunucudan dinamik olarak ister. Paket indirildikten sonra, modül kaydedilir ve rotanın bileşenleri oluşturulur.

Angular’da Lazy Loading Uygulama Adımları

Angular’da lazy loading rotaları uygulamak oldukça basittir. Adım adım nasıl yapılacağını görelim:

Adım 1: Uygulama Yapısını Hazırlama (Modüller Oluşturma)

Lazy loading için ilk adım, uygulamanızı mantıksal olarak ayrı özellik modüllerine bölmektir. Her bir özellik modülü, kendi bileşenlerini, servislerini ve rotalarını içerecektir.

Yeni bir lazy loading modülü oluşturmak için Angular CLI’ı kullanabiliriz:

ng generate module Admin --route admin --module app

Bu komut şunları yapar:
* src/app/admin klasöründe AdminModule ve AdminRoutingModule dosyalarını oluşturur.
* app-routing.module.ts dosyasına admin rotası için lazy loading yapılandırmasını otomatik olarak ekler.

Eğer manuel olarak yapmak isterseniz:
1. Bir özellik modülü oluşturun:

ng generate module Admin

2. Bu modül için bir yönlendirme modülü oluşturun:

ng generate module Admin/admin-routing --flat false --module Admin

--flat false ile admin-routing.module.ts dosyasının Admin klasörü içinde ayrı bir klasörde (admin-routing) oluşturulmasını sağlarız. --module Admin ile bu yönlendirme modülünün AdminModule‘e import edilmesini sağlarız.

Adım 2: Router Yapılandırması (app-routing.module.ts)

Ana yönlendirme modülünüzde (app-routing.module.ts), lazy loading yapmak istediğiniz modül için bir rota tanımlarsınız. Burada kilit nokta loadChildren özelliğini kullanmaktır.

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }, // Örnek bir home component
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  },
  { path: '', component: NotFoundComponent } // 404 sayfası
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Yukarıdaki örnekte:
* admin yoluna gidildiğinde, admin.module dosyası dinamik olarak yüklenir ve AdminModule kullanılır.
* products yoluna gidildiğinde ise products.module dosyası yüklenir ve ProductsModule kullanılır.
* import('./admin/admin.module') ifadesi, ilgili modülün bulunduğu dosya yolunu belirtir.
* .then(m => m.AdminModule) kısmı, Promise çözüldüğünde, yüklenen modül dosyasından AdminModule sınıfını alır.

Adım 3: Özellik Modülü Router Yapılandırması (feature-routing.module.ts)

Her bir lazy loaded modülün kendi içinde de bir yönlendirme modülü olmalıdır. Bu modül, ilgili özelliğin bileşenleri arasındaki navigasyonu yönetir. Burada RouterModule.forChild() metodunu kullanmak önemlidir. forChild() metodu, kök yönlendiricinin (root router) bir alt kümesini yapılandırır ve mevcut yönlendirici örneklerine yeni rotaları ekler.

// src/app/admin/admin-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { AdminUsersComponent } from './admin-users/admin-users.component';

const routes: Routes = [
  {
    path: '', // 'admin' yolu zaten ana router'da tanımlandığı için burada boş bırakılır
    component: AdminDashboardComponent,
    children: [
      { path: 'dashboard', component: AdminDashboardComponent },
      { path: 'users', component: AdminUsersComponent },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

Ve AdminModule içinde AdminRoutingModule‘i içe aktarmayı unutmayın:

// src/app/admin/admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdminRoutingModule } from './admin-routing.module';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { AdminUsersComponent } from './admin-users/admin-users.component';

@NgModule({
  declarations: [
    AdminDashboardComponent,
    AdminUsersComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule // AdminRoutingModule'i buraya import ediyoruz
  ]
})
export class AdminModule { }

Adım 4: Navigasyon

Lazy loaded modüllere yönlendirme yapmak için routerLink direktifini veya router.navigate() metodunu kullanabilirsiniz, tıpkı diğer rotalarda olduğu gibi.

Kullanıcı “Admin Paneli” bağlantısına tıkladığında, admin rotası aktif hale gelir, AdminModule dinamik olarak yüklenir ve AdminDashboardComponent ekranda görünür.

Preloading Stratejileri (Ön Yükleme Stratejileri)

Lazy loading, başlangıç yükleme süresini hızlandırsa da, bir dezavantajı vardır: kullanıcı bir lazy loaded rotaya ilk kez tıkladığında, modülün indirilmesi için kısa bir gecikme yaşanabilir. Bu gecikme, kullanıcı deneyimini hafifçe olumsuz etkileyebilir. İşte bu noktada “Preloading” (Ön Yükleme) stratejileri devreye girer.

Preloading, uygulamanın başlangıçta yüklendikten sonra veya belirli bir boşta kalma süresi boyunca, lazy loaded modülleri arka planda indirmesi anlamına gelir. Böylece, kullanıcı bu modüllere yönlendirildiğinde, modüller zaten indirilmiş ve hazır olduğu için anında erişilebilir olur.

Angular Router, çeşitli preloading stratejileri sunar:

1. NoPreloading (Varsayılan): Hiçbir lazy loaded modül önceden yüklenmez. Modüller yalnızca talep edildiğinde yüklenir.
2. PreloadAllModules: Uygulama başlatıldıktan sonra, tüm lazy loaded modüller arka planda otomatik olarak yüklenir. Bu, tüm modüllerin hızlıca erişilebilir olmasını sağlar ancak başlangıç sonrası ağ trafiğini ve kaynak tüketimini artırabilir.
3. Custom Preloading Strategy (Özel Ön Yükleme Stratejisi): Geliştiricilerin kendi mantıklarını kullanarak hangi modüllerin ne zaman önceden yükleneceğine karar vermesini sağlar. Örneğin, sadece belirli modülleri yükleyebilir, kullanıcının bant genişliğine göre yükleme yapabilir veya belirli bir zamanda yükleme yapabilirsiniz.

Preloading Stratejileri Nasıl Uygulanır?

Preloading stratejisini AppRoutingModule içindeki RouterModule.forRoot() metoduna ikinci bir parametre olarak ekleyerek yapılandırabilirsiniz.

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules, NoPreloading } from '@angular/router';

const routes: Routes = [
  // ... rotalarınız ...
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    // Veya: RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

PreloadAllModules kullanmak, çoğu orta ölçekli uygulama için iyi bir başlangıç noktasıdır. Ancak, daha karmaşık senaryolar için özel bir strateji oluşturmanız gerekebilir.

Özel Ön Yükleme Stratejisi Örneği

Özel bir ön yükleme stratejisi oluşturmak için PreloadingStrategy arayüzünü uygulayan bir servis oluşturmanız gerekir. Bu servis, her bir lazy loaded rota için preload metodunu çağırır.

// src/app/custom-preloading-strategy.service.ts
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable): Observable {
    if (route.data && route.data['preload']) {
      console.log('Preloading: ' + route.path);
      return fn(); // Modülü yükle
    }
    return of(null); // Modülü yükleme
  }
}

Bu özel stratejiyi kullanmak için, rotaların data özelliğine preload: true eklemeniz ve AppRoutingModule içinde stratejiyi belirtmeniz gerekir:

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    data: { preload: true } // Bu modülü önceden yükle
  },
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule),
    data: { preload: false } // Bu modülü önceden yükleme
  },
  { path: '', component: NotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategyService })
  ],
  exports: [RouterModule],
  providers: [CustomPreloadingStrategyService] // Servisi sağlayın
})
export class AppRoutingModule { }

Bu örnekte, sadece admin modülü önceden yüklenecek, products modülü ise talep edildiğinde yüklenecektir. Bu, uygulamanızın ihtiyaçlarına göre çok esnek bir kontrol sağlar.

Lazy Loading ve Modül İletişimi

Lazy loaded modüller, uygulamanın diğer bölümlerinden bağımsız olarak çalışacak şekilde tasarlanmıştır. Ancak, bazı durumlarda bu modüllerin diğer modüllerle veya ana uygulama ile iletişim kurması gerekebilir.

Shared Modüllerin Yönetimi

Birden fazla lazy loaded modül tarafından kullanılan bileşenler, direktifler veya pipe’lar varsa, bunları bir SharedModule içinde toplamak en iyi uygulamadır. SharedModule, bu ortak öğeleri dışa aktarır ve diğer modüller tarafından içe aktarılabilir.

Önemli: SharedModule‘ü lazy loaded modüllere imports dizisi aracılığıyla içe aktarın. Ancak, SharedModule içinde servis sağlayıcıları (providers) tanımlamayın. Servisler, genellikle AppModule içinde veya providedIn: 'root' ile global olarak sağlanmalıdır. Eğer bir servisi lazy loaded bir modülün providers dizisinde tanımlarsanız, o servis yalnızca o modül yüklendiğinde kullanılabilir olur ve her modül kendi servis örneğine sahip olur.

Ortak Servislerin Sağlanması

Uygulama genelinde kullanılacak servisler (örneğin, kimlik doğrulama servisi, API servisi), genellikle AppModule‘ün providers dizisinde tanımlanır veya Angular 6 ve sonrası için providedIn: 'root' ile işaretlenir. Bu, servisin tek bir örnek olarak (singleton) tüm uygulama boyunca erişilebilir olmasını sağlar. Lazy loaded modüller de bu global servislere erişebilir.

// src/app/services/auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Servis uygulama genelinde tek örnek olarak sağlanır
})
export class AuthService {
  // ...
}

State Yönetimi (Ngrx gibi) ile Entegrasyon

Eğer uygulamanız Ngrx gibi bir state yönetim kütüphanesi kullanıyorsa, lazy loaded modüller kendi alt state’lerini tanımlayabilir ve bunları ana state’e dinamik olarak ekleyebilir. Ngrx’in forFeature metodu bu senaryo için tasarlanmıştır.

// src/app/admin/admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { adminReducer } from './state/admin.reducer';

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule,
    StoreModule.forFeature('admin', adminReducer) // Lazy loaded modülün state'ini ekle
  ],
  // ...
})
export class AdminModule { }

Bu, lazy loaded modüllerin kendi state’lerini yönetirken, ana uygulamanın state’ini şişirmemesini sağlar.

Lazy Loading En İyi Uygulamaları (Best Practices)

Lazy loading’den en iyi şekilde faydalanmak için bazı en iyi uygulamaları takip etmek önemlidir:

* Modül Sınırlarını Doğru Belirleme: Uygulamanızın her bir ana özelliğini veya bölümünü ayrı bir modül olarak düşünün. Örneğin, “Admin Paneli”, “Kullanıcı Profilleri”, “Ürün Kataloğu” gibi mantıksal olarak ayrılabilir bölümler lazy loaded modüller için iyi adaylardır.
* Paylaşılan Modülleri Dikkatli Yönetme: Birden fazla lazy loaded modül tarafından kullanılan ortak bileşenleri, direktifleri ve pipe’ları bir SharedModule içinde toplayın. Bu SharedModule‘ü her lazy loaded modüle imports dizisi aracılığıyla içe aktarın. Ancak, SharedModule‘ün kendisini lazy load etmeyin ve içinde servis sağlayıcıları tanımlamaktan kaçının.
* Küçük ve Odaklanmış Modüller Oluşturma: Her bir lazy loaded modülün tek bir sorumluluğu olmalı ve mümkün olduğunca küçük tutulmalıdır. Bu, hem kodun anlaşılırlığını artırır hem de paket boyutlarını daha yönetilebilir kılar.
* Preloading Stratejilerini Akıllıca Kullanma: PreloadAllModules genellikle iyi bir başlangıç noktasıdır. Ancak, uygulamanız çok sayıda lazy loaded modül içeriyorsa veya belirli modüllerin öncelikli olarak yüklenmesi gerekiyorsa, özel bir preloading stratejisi oluşturmayı düşünün. Kullanıcı davranışlarını analiz ederek en çok ziyaret edilen rotaları önceden yüklemek mantıklı olabilir.
* Performans İzleme ve Optimizasyon: Lazy loading uygulandıktan sonra bile, uygulamanızın performansını düzenli olarak izleyin. Tarayıcı geliştirici araçlarını (Network sekmesi) kullanarak paket boyutlarını ve yükleme sürelerini kontrol edin. Gerekirse daha fazla optimizasyon (örneğin, ağaç sallama – tree-shaking, sıkıştırma) yapın.
* Route Guard’lar ile Entegrasyon (canLoad): canLoad guard’ı, bir modülün yüklenmeden önce belirli koşulları kontrol etmenizi sağlar. Örneğin, bir kullanıcının belirli bir modülü yükleme yetkisi yoksa, modülün indirilmesini tamamen engelleyebilirsiniz. Bu, hassas verileri içeren modüller için güvenlik katmanı sağlar.

// src/app/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private authService: AuthService, private router: Router) {}

  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable | Promise | boolean | UrlTree {
    
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Ve app-routing.module.ts içinde kullanımı:

// src/app/app-routing.module.ts
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  // ...
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthGuard] // Modül yüklenmeden önce AuthGuard'ı çalıştır
  },
  // ...
];

Sık Karşılaşılan Sorunlar ve Çözümleri

Lazy loading ile çalışırken karşılaşabileceğiniz bazı yaygın sorunlar ve çözümleri:

* Modül Bulunamadı Hataları:
* Sorun: Cannot find module './admin/admin.module' gibi hatalar alabilirsiniz.
* Çözüm: loadChildren içindeki yolun doğru olduğundan ve dosya adının büyük/küçük harf duyarlılığına dikkat ettiğinizden emin olun. Ayrıca, AdminModule sınıfının doğru şekilde dışa aktarıldığından emin olun.
* Bağımlılık Sorunları (Ortak Servisler):
* Sorun: Lazy loaded bir modülde bir servis kullanmaya çalıştığınızda, servisin yeni bir örneğinin oluşturulduğunu veya tanımsız olduğunu fark edebilirsiniz.
* Çözüm: Uygulama genelinde tek bir örnek olarak sağlanması gereken servisleri AppModule‘ün providers dizisinde veya providedIn: 'root' ile sağlayın. Bir servisi sadece belirli bir lazy loaded modüle özgü yapmak istiyorsanız, o modülün providers dizisinde tanımlayabilirsiniz, ancak bu durumda diğer modüller bu servisin farklı bir örneğine sahip olacaktır.
* Yanlış forChild / forRoot Kullanımı:
* Sorun: RouterModule.forRoot()‘u birden fazla modülde kullanmak veya lazy loaded modüllerde RouterModule.forChild() yerine forRoot() kullanmak beklenmedik yönlendirme davranışlarına veya hatalara yol açabilir.
* Çözüm: RouterModule.forRoot() yalnızca uygulamanın kök yönlendirme modülünde (AppRoutingModule) bir kez kullanılmalıdır. Diğer tüm özellik modüllerinde (lazy loaded veya eager loaded olsun) RouterModule.forChild() kullanılmalıdır.
* Yavaş Yükleme Süreleri (Preloading Olmadan):
* Sorun: Lazy loaded modüllere ilk navigasyonda belirgin bir gecikme yaşanması.
* Çözüm: Uygulamanızın ihtiyaçlarına uygun bir preloading stratejisi uygulayın. PreloadAllModules ile başlayabilir veya daha özelleştirilmiş bir strateji geliştirebilirsiniz.

Sonuç

Lazy loading, Angular uygulamalarının performansını ve kullanıcı deneyimini önemli ölçüde artıran vazgeçilmez bir optimizasyon tekniğidir. Uygulamanızın başlangıç yükleme süresini kısaltarak, daha küçük ilk paket boyutları sunarak ve kaynakları daha verimli kullanarak, modern web uygulamalarının beklentilerini karşılamanıza yardımcı olur.

Doğru modül yapısını oluşturmak, loadChildren özelliğini etkin bir şekilde kullanmak ve preloading stratejilerini akıllıca uygulamak, Angular uygulamanızın ölçeklenebilirliğini ve bakım kolaylığını da artıracaktır. Uygulamanız büyüdükçe, lazy loading’in sunduğu faydalar daha da belirgin hale gelecektir. Bu makaledeki adımları ve en iyi uygulamaları takip ederek, Angular uygulamalarınızı daha hızlı, daha duyarlı ve daha kullanıcı dostu hale getirebilirsiniz.