Что такое Zone.js и что означает «zoneless» Angular?

Question

Accepted Answer

**Zone.js** — это библиотека, которую Angular исторически использовал, чтобы узнать **когда запустить обнаружение изменений**. Она патчит асинхронные API браузера, позволяя Angular автоматически обнаруживать любое событие, которое может изменить состояние. **Zoneless** Angular убирает эту зависимость, полагаясь вместо этого на сигналы и явные уведомления.

## Что делает 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, что асинхронное событие завершилось.

```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 не может сказать, *что* изменилось, он вызывает полный проход обнаружения изменений для многих событий — неэффективно для больших приложений.

## Zoneless Angular (на основе сигналов)

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

В режиме zoneless Angular не полагается на патченные асинхронные API. Вместо этого обнаружение изменений запускается **явно** — в основном **сигналами** (которые уведомляют Angular ровно когда их значение изменяется), плюс конвейер `async`, события и `markForCheck()`.

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

## Преимущества перехода на 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)
```

## Почему это важно

Zone.js объясняет длительное «автоматическое» обнаружение изменений Angular — и его стоимость (размер бандла, широкая/неточная проверка).

Переход на **zoneless**, поддерживаемый **сигналами**, — это крупный архитектурный сдвиг: он делает обновления точными и явными, уменьшает бандл и улучшает производительность.

Понимание обоих — почему Zone.js существовал и что его заменит — становится всё более важным, так как Angular движется к сигнальному, zoneless-подходу как стандарту по умолчанию.