Zone.js ਕੀ ਹੈ ਅਤੇ "zoneless" Angular ਦਾ ਕੀ ਮਤਲਬ ਹੈ?

Question

Accepted Answer

**Zone.js** ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜਿਸਨੂੰ Angular ਨੇ ਇਤਿਹਾਸਕ ਤੌਰ 'ਤੇ **ਜਦੋਂ change detection ਚਲਾਉਣੀ ਹੈ** ਇਹ ਜਾਣਨ ਲਈ ਵਰਤਿਆ ਹੈ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ async APIs ਨੂੰ ਪੈਚ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ Angular ਆਪਣੇ ਆਪ ਨੂੰ ਕਿਸੇ ਵੀ ਘਟਨਾ ਦਾ ਪਤਾ ਲਗਾ ਸਕੇ ਜੋ ਸਥਿਤੀ ਨੂੰ ਬਦਲ ਸਕਦੀ ਹੈ। **Zoneless** 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 ਜਵਾਬ ਜਾਂ ਕਲਿੱਕ ਦੇ ਬਾਅਦ ਕਿਸੇ ਸੰਪੱਤੀ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਅਤੇ view ਸਿਰਫ ਅਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ — ਕਿਉਂਕਿ 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 ਇਹ ਨਹੀਂ ਦੱਸ ਸਕਦਾ *ਕੀ* ਬਦਲਿਆ ਹੈ, ਇਹ ਬਹੁਤ ਸਾਰੀਆਂ ਘਟਨਾਵਾਂ 'ਤੇ ਇੱਕ ਪੂਰਾ change-detection ਪਾਸ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ — ਵੱਡੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਅਕੁਸ਼ਲ।

## Zoneless Angular (signals-ਆਧਾਰਿਤ)

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

Zoneless ਮੋਡ ਵਿੱਚ, Angular ਪੈਚ ਕੀਤੀਆਂ ਗਈਆਂ async APIs 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ। ਇਸ ਦੀ ਥਾਂ, change detection **ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ** ਟ੍ਰਿਗਰ ਹੁੰਦੀ ਹੈ — ਮੁਖ ਤੌਰ 'ਤੇ **signals** ਦੁਆਰਾ (ਜੋ Angular ਨੂੰ ਦੱਸਦੇ ਹਨ ਕਿ ਉਹਨਾਂ ਦੀ ਵੈਲਯੂ ਬਦਲੀ ਹੈ), ਨਾਲ ਹੀ `async` pipe, events, ਅਤੇ `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 ਦੀ ਲੰਬੇ ਸਮੇਂ ਦੀ "ਆਪਣੇ ਆਪ ਨੂੰ" change detection ੌ ਅਤੇ ਇਸ ਦੀ ਕੀਮਤ (bundle ਆਕਾਰ, ਵਿਆਪਕ/ਅਸਪੱਸ਼ਟ ਜਾਂਚ) ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ।

**Zoneless** ਲਈ ਅਤੀਵ **signals** ਦੀ ਸ਼ਕਤੀ ਨਾਲ ਚਲਿਆ ਜਾ ਰਿਹਾ ਸ਼ਿਫਟ ਇੱਕ ਮੁੱਖ ਆਰਕੀਟੈਕਚਰਲ ਬਦਲਾਅ ਹੈ: ਇਹ ਅਪਡੇਟਸ ਨੂੰ ਬਾਰੀਕ-ਗ੍ਰੇਨਡ ਅਤੇ ਸਪੱਸ਼ਟ ਬਣਾਉਂਦਾ ਹੈ, bundle ਨੂੰ ਸੁੰਘੜੁ ਕਰਦਾ ਹੈ, ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ।
all ਨੂੰ ਸਮਝਨਾ — Zone.js ਕਿਉਂ ਮੌਜੂਦ ਸੀ ਅਤੇ ਇਸਨੂੰ ਕੀ ਬਦਲਦਾ ਹੈ — ਇੱਕ ਸ਼ਕਤੀ-ਅਧਾਰਿਤ, zoneless ਭਵਿੱਖ ਵੱਲ Angular ਦੇ ਤਿਕੋਣ ਰੂਪ 'ਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮਹੱਤਵਪੂਰਨ ਬਣ ਰਿਹਾ ਹੈ।