Zone.js คืออะไร และ "zoneless" Angular หมายถึงอะไร

Question

Accepted Answer

**Zone.js** คือไลบรารีที่ Angular ใช้ตามประวัติศาสตร์เพื่อ **ทราบว่าเมื่อใดต้องเรียกใช้การตรวจจับการเปลี่ยนแปลง** มันแพตช์ async API ของเบราว์เซอร์เพื่อให้ Angular สามารถตรวจจับอัตโนมัติเหตุการณ์ใด ๆ ที่อาจเปลี่ยนสถานะ **Zonless** Angular ลบการพึ่งพิงนี้ โดยอาศัย signals และการแจ้งเตือนที่ชัดแจ้งแทน

## Zone.js ทำอะไร

```text
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
```

นี่คือ "เวทมนตร์" ที่อยู่เบื้องหลังการอัปเดตอัตโนมัติของ Angular: คุณเปลี่ยนคุณสมบัติหลังจากการตอบสนอง HTTP หรือการคลิก และมุมมองเพียงแค่อัปเดต — เพราะ Zone.js บอก Angular ว่าเหตุการณ์ async เสร็จสิ้นแล้ว

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## ข้อเสียของ Zone.js

```text
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
```

เนื่องจาก Zone.js ไม่สามารถบอกได้ว่า *อะไร* เปลี่ยนแปลง มันจึงเรียกใช้ full change-detection pass กับเหตุการณ์มากมาย — ไม่มีประสิทธิภาพสำหรับแอปขนาดใหญ่

## Zonless Angular (based on signals)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

ในโหมด zonless Angular ไม่พึ่งพิง async API ที่ได้รับการแพตช์ แทนที่นั้น การตรวจจับการเปลี่ยนแปลงจะถูกทริกเกอร์ **อย่างชัดแจ้ง** — โดยหลัก **signals** (ซึ่งแจ้งให้ Angular ทราบอย่างชัดเจนว่าค่าเปลี่ยนแปลงเมื่อใด) บวกกับ `async` pipe เหตุการณ์ และ `markForCheck()`

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## ประโยชน์ของการเป็น zonless

```text
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
```

## ทำไมจึงมีความสำคัญ

Zone.js อธิบายการตรวจจับการเปลี่ยนแปลง "อัตโนมัติ" ที่ยาวนานของ Angular — และค่าใช้จ่ายของมัน (ขนาด bundle การตรวจสอบแบบกว้าง/ไม่แม่นยำ)

การเปลี่ยนไปเป็น **zonless** ซึ่งขับเคลื่อนโดย **signals** เป็นการเปลี่ยนแปลงสถาปัตยกรรมที่สำคัญ: ทำให้การอัปเดตมีรายละเอียดและชัดแจ้ง ลดขนาด bundle และปรับปรุงประสิทธิภาพ

การเข้าใจทั้งสองอย่าง — ว่าทำไม Zone.js จึงมีอยู่และสิ่งที่แทนที่มัน — มีความสำคัญมากขึ้นเรื่อย ๆ เนื่องจาก Angular กำลังสร้างอนาคตที่ใช้ signals zonless เป็นค่าเริ่มต้น