Angular Lazy Loading Nedir?

Angular’da varsayılan olarak Eager Loading yaklaşımı vardır. Uygulama içerinde ne kadar modül varsa, uygulama ilk açıldığında bu modüllerin hepsi yüklenir. İlk etapta sorun gibi görünmese de uygulama büyüdükçe, sayfanın yüklenmesi yavaşlayacaktır. Bu durumun önüne geçmek için Angular modüllerinin lazy-load olarak yüklenmesini sağlayan Lazy Loading konseptini desteklemektedir. Lazy Loading, uygulama içinde sadece kullanılan modüllerin yüklenmesi konseptine dayanır. Bu sayede uygulamanın “bundle-size” değeri azalmış olacağı için uygulamanın yüklenme hızı artmış olacaktır.

Peki uygulama hangi modülün kullanıldığını nereden anlıyor? Angular bunu route üzerinden yönetiyor. Çünkü route belli bir component’i gösterdiği gibi bir mödülü ve o modülün bütün alt component’lerini de gösterebilir. Dolayısıyla route’un gösterdiği component standalone değilse illaki bir modüle dahildir. Angular modüllerini lazy-load olarak yüklemek için, ”AppRoutingModule” içerisinde route tanımı yapılırken, component yerine “loadChildren” tanımlanmalıdır.

const routes: Routes = [
  {
    path: 'items',
    // Lazy-load module
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

Ayrıca lazy-load olarak tanımlanan modülün RouteModule’ünde component’in route tanımı yapılır.

const routes: Routes = [
  {
    path: '',
    component: ItemsComponent
  }
];

forRoot() ve forChildren() Metodları Ne İşe Yarar?

Angular’da forRoot() ve forChildren() metodları, yönlendirme (routing) modüllerini yapılandırmak için kullanılır. Angular CLI ile bir proje oluşturulduğunda, Angular CLI varsayılan olarak AppRoutingModule‘un içindeki import dizisine RouterModule.forRoot(routes) ekler. Bu, Angular’a AppRoutingModule’ün bir route modülü olduğunu ve forRoot()’un ise ana route modülü olduğunu belirtir. forRoot() yöntemini uygulamada yalnızca bir kez, AppRoutingModule içinde kullanılır.

forChildren() metodu, ana modülün alt modüllerini veya component’lerini yapılandırmak için kullanılır. Bu, modüler bir yapıya sahip uygulamalarda, özellikle feature modüllerinde (feature modules) veya belirli bir işlevselliği olan alt modüllerde kullanılır. Alt modüllerdeki yolları yapılandırır ve bu modüllerin yönlendirme mantığını belirler. Ana modül ile aynı işlevselliği sağlamaz. Birden çok kez kullanılabilir, her alt modül için ayrı ayrı yapılandırılabilir.

Preloading(önyükleme) Nedir?

Önyükleme ile uygulamanın bazı parçaları arka planda yüklenirken UX kısmını iyileştirir. Uygulamada modüller, standalone component’ler veya component dataları önyüklenebilir. Bu sırada kullanıcı bir route’u aktif ettiğinde sayfanın açılmasını beklemek zorunda değildir.

Modul Bazlı Uygulamada Önyükleme:

Modül bazlı uygulamada Lazy-load olarak yüklenmiş modüllerin önyükleme yapılması için Angular Router içindeki PreloadAllModules’ün import edilip route ayarlarına eklenmesi gerekir.

import { PreloadAllModules } from '@angular/router';

RouterModule.forRoot(
  appRoutes,
  {
    preloadingStrategy: PreloadAllModules
  }
)

Standalone Uygulamada Önyükleme:

Standalone bir uygulamada ise önyükleme stratejisi app.config.ts içerindeki providerRouter’a withPreloading ifadesinin verilmesi ile sağlanır.

import { ApplicationConfig } from '@angular/core';
import {
  PreloadAllModules,
  provideRouter
  withPreloading,
} from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withPreloading(PreloadAllModules) // for standalone app
    ),
  ],
};

Component Datanın Önyüklenmesi:

Component datasının yüklenmesi için resolver kullanılır. Bunun için bir tane resolver-servisi oluşturulur. Bu servis @angular/router içindeki Resolve interface’ini implement eder.

import { Resolve } from '@angular/router';
…
/*An interface that represents your data model*/
export interface Crisis {
  id: number;
  name: string;
}
export class CrisisDetailResolverService implements Resolve<Crisis> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
    // your logic goes here
  }
}

Daha sonra bu servis routing modüle içerisinde import edilerek ayarlanır.

import { CrisisDetailResolverService } from './crisis-detail-resolver.service';

{
  path: '/your-path',
  component: YourComponent,
  resolve: {
    crisis: CrisisDetailResolverService
  }
}

Component sınıfında ActivatedRoute constructor’a inject edilerek mevcut route ile kullanılır.

import { ActivatedRoute } from '@angular/router';

@Component({ … })
class YourComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.data
      .subscribe(data => {
        const crisis: Crisis = data.crisis;
        // …
      });
  }
}

Angular’da Lazy Loading, büyük ve karmaşık uygulamalarda performansı optimize etmek için vazgeçilmez bir tekniktir. Bu makalede, Lazy Loading’in ne olduğunu, nasıl yapılandırıldığını ve hangi durumlarda kullanılması gerektiğini ele aldık. Lazy Loading sayesinde, uygulamanın başlangıç yükleme süresi azaltılabilir ve kullanıcı deneyimi önemli ölçüde iyileştirilebilir. İhtiyaç duyulan modüllerin yalnızca gerektiğinde yüklenmesi, kaynakların daha verimli kullanılmasını sağlar ve kullanıcıların daha hızlı bir şekilde etkileşime geçmesine olanak tanır. Bu teknik, modern web uygulamalarının performansını artırmak için güçlü bir araçtır ve Angular projelerinde etkili bir şekilde kullanıldığında büyük avantajlar sağlar.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular