Zone.js là gì và Angular "zoneless" nghĩa là gì?

Question

Accepted Answer

**Zone.js** là một thư viện mà Angular trước nay sử dụng để biết **khi nào chạy change detection**. Nó vá các API async của trình duyệt để Angular có thể tự động phát hiện bất kỳ sự kiện nào có thể thay đổi state. Angular **zoneless** loại bỏ phụ thuộc này, thay vào đó dựa vào signal và các thông báo tường minh.

## Zone.js làm gì

```text
Zone.js monkey-patch các API async: setTimeout, addEventListener, Promise,
XHR/fetch, v.v. Khi bất kỳ cái nào kích hoạt, Zone.js thông báo cho Angular →
Angular tự động chạy change detection.
```

Đây là "phép màu" đằng sau các cập nhật tự động của Angular: bạn thay đổi một thuộc tính sau một response HTTP hoặc một click, và view cứ thế cập nhật — vì Zone.js đã báo cho Angular rằng một sự kiện async đã hoàn tất.

```ts
// bạn viết cái này, và view tự động cập nhật — nhờ Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js kích hoạt CD
```

## Các nhược điểm của Zone.js

```text
✗ Overhead — vá mọi thứ, và kích hoạt CD rộng (kiểm tra toàn bộ cây)
✗ ~100KB thêm vào bundle
✗ Thiếu chính xác — chạy change detection ngay cả khi không có gì liên quan thay đổi
✗ Có thể gây bối rối với code bên thứ ba chạy ngoài zone của Angular
```

Vì Zone.js không thể biết *cái gì* đã thay đổi, nó kích hoạt một lượt change detection đầy đủ trên nhiều sự kiện — không hiệu quả cho các ứng dụng lớn.

## Angular zoneless (dựa trên signal)

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

Trong chế độ zoneless, Angular không dựa vào các API async đã vá. Thay vào đó, change detection được kích hoạt **một cách tường minh** — chủ yếu bởi **signal** (thông báo cho Angular chính xác khi giá trị của chúng thay đổi), cùng với pipe `async`, các sự kiện, và `markForCheck()`.

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // signal báo cho Angular cái gì đã thay đổi → cập nhật mịn
```

## Lợi ích của việc chuyển sang zoneless

```text
✓ Bundle nhỏ hơn (bỏ ~100KB Zone.js)
✓ Hiệu năng tốt hơn — cập nhật mịn, chính xác (chỉ những gì phụ thuộc vào signal đã thay đổi)
✓ Tích hợp sạch sẽ hơn với code không phải Angular
✓ Debug đơn giản hơn (không có nhiễu stack liên quan tới zone)
```

## Tại sao điều này quan trọng

Zone.js giải thích change detection "tự động" lâu đời của Angular — và cái giá của nó (kích thước bundle, kiểm tra rộng/thiếu chính xác).

Sự chuyển dịch sang **zoneless**, được hỗ trợ bởi **signal**, là một thay đổi kiến trúc lớn: nó làm các cập nhật mịn và tường minh, thu nhỏ bundle, và cải thiện hiệu năng.

Hiểu cả hai — vì sao Zone.js tồn tại và cái gì thay thế nó — ngày càng quan trọng khi Angular lái về một tương lai dựa trên signal, zoneless làm mặc định.