Lazy Loading

A “lazy loading” egy olyan optimalizálási technika, ahol egy alkalmazás csak azokat a kód-szegmenseket, modulokat vagy erőforrásokat tölti be, amelyekre azonnal szüksége van, és késlelteti a többi betöltését addig, amíg azokra ténylegesen szükség van. Ezt azért alkalmazzák, hogy javítsák az alkalmazás betöltési sebességét és az első interaktív időpontját.

Az Angular alkalmazásokban a lazy loading különösen fontos, mivel nagyméretű alkalmazások esetén nem hatékony az összes modul és komponens egyszerre történő betöltése. Ehelyett a lazy loading segítségével csak az alapvető funkciókhoz szükséges kódot töltjük be kezdetben, majd amikor a felhasználó egy adott funkcionalitást vagy nézetet választ, az ahhoz tartozó modulokat betöltjük.

Az Angularban a lazy loading a következőképpen működik:

1. Külön Angular Modulok: Minden lazy loading funkció saját Angular moduljában kell lennie.
2. RouterModule használata: Az Angular Routing rendszere lehetővé teszi a lazy loading alkalmazását.
3. Különálló útvonalak és loadChildren: Az útvonalak konfigurációjában a loadChildren tulajdonságot használjuk a lazy loaded modulokra utaláshoz.

Például:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

Ebben a példában a FeatureModule csak akkor töltődik be, amikor a felhasználó a /feature útvonalra navigál.

Az Angular CLI és a Webpack automatikusan kezeli a modulokat különálló csomagokként (chunk), amikor a lazy loadingot alkalmazzuk, így optimalizálva az alkalmazás betöltési sebességét.

Egyéb Példa

A lazy loading nem korlátozódik csak az útvonalakra (routing) Angularban. Bár az útvonalak a leggyakrabban használt esetek a lazy loading szempontjából, lehetséges dinamikusan betölteni modulokat más körülmények között is.

Ebben a példában egy egyszerű Angular alkalmazást fogok bemutatni, amelyben egy gombra kattintva dinamikusan tölt be egy modult.

1. LazyLoadedModule létrehozása:
   Először hozz létre egy LazyLoadedModule modult, amelynek van egy LazyComponent komponense.

// lazy-loaded.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';

@NgModule({
  declarations: [LazyComponent],
  imports: [CommonModule],
  entryComponents: [LazyComponent]
})
export class LazyLoadedModule { }

// lazy.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-lazy',
  template: '<p>Lusta komponens betöltve!</p>'
})
export class LazyComponent {}

2. AppComponent: Ebben a komponensben van egy gomb, amelyre kattintva betöltjük a LazyLoadedModule-t, majd hozzáadunk egy példányt a LazyComponent-ből a nézethez.

// app.component.ts
import { Component, Injector, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="loadLazyModule()">Betöltés</button>'
})
export class AppComponent {
  constructor(
    private injector: Injector,
    private viewContainerRef: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {}

  async loadLazyModule() {
    const { LazyLoadedModule } = await import('./lazy-loaded.module');
    const moduleRef = LazyLoadedModule.ngModuleDef.create(this.injector);

    const { LazyComponent } = await import('./lazy.component');
    const factory = this.cfr.resolveComponentFactory(LazyComponent);
    this.viewContainerRef.createComponent(factory, undefined, moduleRef.injector);
  }
}

Ebben a példában a loadLazyModule metódus használja az import() szintaxist a modul és a komponens dinamikus importálásához. Azután létrehozza a modult és a komponenst, majd hozzáadja azt a nézethez.

Ez egy egyszerűsített példa a dinamikus lazy loadingra Angularban, amely nem használ útvonalakat. Természetesen a valós alkalmazásokban további logika és konfiguráció is szükséges lehet.