Virtual Scroll, Pure Pipe, Lazy Loading

Ez az interjúpont három fontos teljesítményoptimalizálási és architekturális Angular best practice-et fed le, melyeket egy medior fejlesztőtől már elvárnak. Nézzük egyenként, rövid magyarázattal és példával:

✅ 1. Hosszú listákhoz `virtualScroll` használata

🔹 Mi ez?

Csak a látható elemeket rendereli a DOM-ba, így jelentősen csökkenti a memóriahasználatot és növeli a teljesítményt.
Angular Material vagy CDK része (@angular/cdk/scrolling).

🔹 Példa:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

🔹 Mikor használd?

Több száz / ezer elem esetén (*ngFor már nem elég hatékony).
Nagy adatlisták (pl. user lista, termékek, logok).

✅ 2. Pure pipe-ok használata mindenhol, ahol lehet

🔹 Mi az a “pure pipe”?

Determinista pipe: csak akkor fut újra, ha az input értéke megváltozik.
Angular alapértelmezetten minden pipe ilyen, kivéve ha pure: false.

@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

🔹 Előny:

Nem fut újra minden change detection ciklusban.
Gyorsabb lista renderelés (*ngFor belül pl.).

🔹 Mikor kerüld a pure: false-t?

Csak akkor, ha a bemenet referencia szerint nem változik, de a tartalma igen (pl. Array.push()), és muszáj újraszámolni.
Ha ilyen kell, inkább használj ChangeDetectionStrategy.OnPush-t és trackBy-t.

✅ 3. Lazy loading használata route-okhoz

🔹 Miért fontos?

Csak azt a modulrészt tölti be, amit az adott route használ, így gyorsabb az initial load.
Nagyobb projektekben elengedhetetlen.

🔹 Példa (Angular 15+ standalone komponens):

// app.routes.ts
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () =>
      import('./features/dashboard/dashboard.routes').then(m => m.dashboardRoutes)
  }
];

Vagy modul alapú projektben:

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

🔹 Előnyök:

Gyorsabb első betöltés.
Csökkenti az initial bundle méretet.
Megosztható feature modulok (micro frontend előkészítés is).

🧠 Összefoglalás

Elvárás	Mit jelent?	Mit nyersz vele?
`virtualScroll`	Csak látható elemek renderelése	Jobb perf nagy listánál
Pure pipe-ok	Nem futnak újra minden CD ciklusban	Gyorsabb UI frissítés
Lazy loading route-ok	Modul csak route-nál töltődik be	Kisebb initial bundle

Ha szeretnéd, tudok segíteni trackBy példával, vagy konkrét cdk-virtual-scroll konfigurálással (pl. dinamikus magasság, offset), vagy route lazy loading példát modul és standalone struktúrában is.

✅ 1. Hosszú listákhoz virtualScroll használata