Apakah Zone.js dan apakah maksud "zoneless" Angular?

Question

Accepted Answer

**Zone.js** ialah perpustakaan yang Angular secara historis gunakan untuk mengetahui **bila menjalankan deteksi perubahan**. Ia menampal API asinkron peramban supaya Angular dapat mengesan sebarang acara yang mungkin mengubah keadaan secara automatik. **Zoneless** Angular mengeluarkan kebergantungan ini, sebaliknya bergantung pada signal dan pemberitahuan eksplisit.

## What Zone.js does

```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.
```

Ini ialah "sihir" di sebalik kemas kini automatik Angular: anda mengubah sifat selepas tindak balas HTTP atau klik, dan pandangan hanya dikemas kini — kerana Zone.js memberitahu Angular bahawa acara asinkron telah selesai.

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

## The downsides of 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
```

Kerana Zone.js tidak dapat memberitahu *apa* yang berubah, ia memicu laluan pengesanan perubahan penuh pada banyak acara — tidak cekap untuk aplikasi besar.

## Zoneless Angular (signals-based)

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

Dalam mod zoneless, Angular tidak bergantung pada API asinkron yang ditampal. Sebaliknya, pengesanan perubahan dicetuskan **secara eksplisit** — terutamanya oleh **signal** (yang memberitahu Angular dengan tepat bila nilainya berubah), ditambah paip `async`, acara, dan `markForCheck()`.

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

## Benefits of going zoneless

```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)
```

## Mengapa ia penting

Zone.js menerangkan pengesanan perubahan "automatik" jangka panjang Angular — dan kosnya (saiz bundel, pemeriksaan luas/tidak tepat).

Berpindah ke **zoneless**, dikuatkan oleh **signal**, ialah perubahan seni bina besar: ia menjadikan kemas kini halus dan eksplisit, mengecilkan bundel, dan meningkatkan prestasi.

Memahami kedua-duanya — mengapa Zone.js wujud dan apa yang menggantikannya — semakin penting apabila Angular mengarahkan ke masa depan tanpa zon dan berasaskan signal sebagai lalai.