Angular Deferrable Views: โหลด Component แบบ Lazy ใน Template

Deferrable Views คืออะไร

Angular 17 แนะนำ @defer block ที่ช่วยให้ lazy load component ได้โดยตรงใน template โดยไม่ต้องตั้งค่า route

@defer พื้นฐาน

@defer {
  <app-heavy-chart />
}

Trigger Options

<!-- โหลดเมื่อ browser idle -->
@defer (on idle) {
  <app-analytics />
}

<!-- โหลดเมื่อ element เข้า viewport -->
@defer (on viewport) {
  <app-comments />
}

<!-- โหลดเมื่อ user hover -->
@defer (on hover) {
  <app-tooltip />
}

<!-- โหลดเมื่อ user interact -->
@defer (on interaction) {
  <app-chat />
}

<!-- โหลดหลัง timer -->
@defer (on timer(3s)) {
  <app-promo-banner />
}

<!-- โหลดเมื่อ condition เป็น true -->
@defer (when isLoggedIn()) {
  <app-user-dashboard />
}

Placeholder และ Loading

@defer (on viewport) {
  <app-heavy-component />
} @placeholder (minimum 200ms) {
  <div class="skeleton">กำลังโหลด...</div>
} @loading (minimum 500ms; after 100ms) {
  <app-spinner />
} @error {
  <p>โหลดไม่สำเร็จ กรุณาลองใหม่</p>
}

Prefetch

<!-- โหลด component ล่วงหน้าเมื่อ idle แต่แสดงเมื่อ click -->
@defer (on interaction; prefetch on idle) {
  <app-modal />
}

ผลต่อ Bundle Size

// ก่อน @defer - โหลดทุกอย่างพร้อมกัน
import { HeavyChartComponent } from './heavy-chart.component';

// หลัง @defer - Angular แยก chunk อัตโนมัติ
// ไม่ต้อง import เอง แค่ใช้ใน template

สรุป

@defer เป็น feature ที่ทรงพลังมากใน Angular 17 ช่วยลด initial bundle size และปรับปรุง Core Web Vitals ได้โดยไม่ต้องเปลี่ยน routing structure ครับ