ਇੱਕ JS bundle ਨੂੰ ਕੀ ਵਧਾਉਂਦਾ ਹੈ, ਅਤੇ size ਕਿਉਂ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ?

Question

IT Interview Practice · Accepted Answer

ਇੱਕ **bundle** ਉਹ JavaScript ਹੈ ਜੋ ਤੁਹਾਡਾ build tool package ਕਰਕੇ browser ਨੂੰ ਭੇਜਦਾ ਹੈ। ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ **dependencies**, **duplicated code**, ਅਤੇ **ਅਜਿਹਾ code ਭੇਜਣ ਤੋਂ ਜੋ page ਨੂੰ ਹਾਲੇ ਲੋੜੀਂਦਾ ਨਹੀਂ** ਤੋਂ ਵਧਦਾ ਹੈ।

## ਇਸਨੂੰ ਕੀ ਫੁਲਾਉਂਦਾ ਹੈ

- **ਭਾਰੀ libraries** — ਇੱਕ date ਜਾਂ icon library ਸੈਂਕੜੇ KB ਜੋੜ ਸਕਦੀ ਹੈ। ਇੱਕ function ਲਈ ਪੂਰੀ `lodash` import ਕਰਨਾ ਪੂਰੀ ਚੀਜ਼ ਖਿੱਚ ਲੈਂਦਾ ਹੈ।
- ਜੋ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ ਉਸ ਦੀ ਬਜਾਏ **ਸਭ ਕੁਝ import ਕਰਨਾ**:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **ਕੋਈ code splitting ਨਹੀਂ** — ਪੂਰੀ app (ਹਰ route, ਹਰ modal) ਇੱਕ file ਵਿੱਚ bundle ਹੋ ਕੇ ਸ਼ੁਰੂ ਵਿੱਚ load ਹੁੰਦੀ ਹੈ।
- **Polyfills ਅਤੇ duplicated dependencies** — ਇੱਕੋ package ਦੇ ਦੋ versions ਦੋ ਵਾਰ bundle ਹੋਏ।

## Size ਕਿਉਂ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ

Bytes ਛੋਟੀ ਸਮੱਸਿਆ ਹੈ; JS ਨੂੰ **parse ਅਤੇ execute** ਕਰਨਾ ਵੱਡੀ ਸਮੱਸਿਆ ਹੈ। Browser ਨੂੰ ਹਰ byte download ਕਰਨਾ, ਫਿਰ parse, compile, ਅਤੇ main thread 'ਤੇ run ਕਰਨਾ ਪੈਂਦਾ ਹੈ — ਅਤੇ ਇਹ ਇੱਕ mid-range phone 'ਤੇ laptop ਨਾਲੋਂ ਕਿਤੇ ਹੌਲੀ ਹੈ। ਭਾਰੀ JS interactivity ਨੂੰ ਦੇਰੀ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿੱਧਾ **INP** ਤੇ **LCP** ਨੂੰ ਖ਼ਰਾਬ ਕਰਦਾ ਹੈ।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

"ਬੱਸ library ਜੋੜ ਦਿਓ" ਇਸੇ ਤਰ੍ਹਾਂ apps ਚੁੱਪਚਾਪ ਹੌਲੀ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। Interviewers ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹਨ ਕਿ bundle ਫੁੱਲਣ ਤੋਂ ਪਹਿਲਾਂ ਤੁਸੀਂ *ਪ੍ਰਤੀ dependency ਲਾਗਤ* ਬਾਰੇ ਸੋਚਦੇ ਹੋ ਅਤੇ per-function imports, tree shaking, ਤੇ code splitting ਵੱਲ ਵਧਦੇ ਹੋ — ਖ਼ਾਸਕਰ ਕਿਉਂਕਿ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਦੇ phones ਤੁਹਾਡੀ dev machine ਨਾਲੋਂ ਕਿਤੇ ਕਮਜ਼ੋਰ ਹਨ।

ਇਸਨੂੰ ਕੀ ਫੁਲਾਉਂਦਾ ਹੈ

Size ਕਿਉਂ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ