एक 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 छोटी समस्या है; **parsing और executing** JS बड़ी समस्या है। browser को हर byte को download, फिर parse, compile, और main thread पर run करना पड़ता है — और यह एक mid-range phone पर एक laptop की तुलना में बहुत धीमा है। भारी JS interactivity में देरी करता है और सीधे **INP** तथा **LCP** को बिगाड़ता है।

## यह क्यों महत्वपूर्ण है

"बस library जोड़ दो" इसी तरह apps चुपचाप धीमे हो जाते हैं। Interviewers यह देखना चाहते हैं कि आप *प्रति dependency लागत* के बारे में सोचें और bundle के फूलने से पहले per-function imports, tree shaking, और code splitting का सहारा लें — खासकर इसलिए कि आपके users के phones आपकी dev machine से कहीं कमजोर हैं।

इसे क्या फुलाता है

size क्यों नुकसान पहुँचाता है

यह क्यों महत्वपूर्ण है

संबंधित प्रश्न