Angular Performance Optimization: เทคนิคเพิ่มความเร็ว App

ทำไม Performance ถึงสำคัญ

App ที่ช้าทำให้ user experience แย่ Google ใช้ Core Web Vitals เป็นปัจจัย SEO ด้วย

1. OnPush Change Detection

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

2. TrackBy ใน ngFor

// ❌ ไม่มี trackBy - re-render ทุก item ทุกครั้ง
<li *ngFor="let user of users">{{ user.name }}</li>

// ✅ มี trackBy - re-render เฉพาะที่เปลี่ยน
<li *ngFor="let user of users; trackBy: trackByUserId">
  {{ user.name }}
</li>

trackByUserId(index: number, user: User): number {
  return user.id;
}

3. Lazy Loading

{ path: 'heavy', loadComponent: () => import('./heavy.component') }

4. Virtual Scrolling

import { ScrollingModule } from '@angular/cdk/scrolling';

@Component({
  imports: [ScrollingModule],
  template: `
    <cdk-virtual-scroll-viewport itemSize="50" style="height: 400px">
      <div *cdkVirtualFor="let item of items">{{ item }}</div>
    </cdk-virtual-scroll-viewport>
  `
})

5. Defer Block

@defer (on idle) {
  <app-analytics-chart />
}

6. Image Optimization

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <img ngSrc="/hero.jpg" width="800" height="400" priority />
  `
})

7. Memoization ด้วย Signals

const expensiveResult = computed(() => {
  return heavyCalculation(this.data());
});
// computed จะ cache ผลลัพธ์ รันใหม่เฉพาะเมื่อ data() เปลี่ยน

8. Avoid Memory Leaks

private destroy$ = new Subject<void>();

ngOnInit() {
  this.service.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(...);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

สรุป

เริ่มจาก OnPush + trackBy + Lazy Loading ก่อน แล้วค่อย profile ด้วย Chrome DevTools เพื่อหา bottleneck จริงๆ ครับ