JS bundle लाई केले बढाउँछ, र size ले किन हानि गर्छ?

Question

IT Interview Practice · Accepted Answer

एउटा **bundle** तपाईंको build tool ले package गरेर browser मा पठाउने JavaScript हो। यो मुख्यतया **dependency**, **duplicated code**, र **page लाई अहिले नै नचाहिने code पठाउनु** बाट बढ्छ।

## यसलाई केले फुलाउँछ

- **भारी library** — एउटा 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 हुन्छ।
- **Polyfill र duplicated dependency** — एउटै package का दुई version दुई पटक bundle हुन्छन्।

## size ले किन हानि गर्छ

Byte सानो समस्या हो; JS **parse र execute गर्नु** ठूलो समस्या हो। Browser ले हरेक byte download, त्यसपछि parse, compile, र main thread मा run गर्नुपर्छ — र laptop भन्दा mid-range phone मा यो धेरै ढिलो हुन्छ। भारी JS ले interactivity ढिलो गर्छ र **INP** र **LCP** लाई सीधै बिगार्छ।

## यो किन महत्त्वपूर्ण छ

"बस library थप्ने" भन्ने तरिकाले app चुपचाप ढिलो हुन्छन्। Interviewer हरू तपाईंले bundle फुल्नुअघि *प्रति dependency लागत* बारे सोचेको र per-function import, tree shaking, र code splitting तिर पुगेको देख्न चाहन्छन् — विशेषगरी तपाईंका प्रयोगकर्ताका phone तपाईंको dev machine भन्दा धेरै कमजोर भएकाले।

यसलाई केले फुलाउँछ

size ले किन हानि गर्छ

यो किन महत्त्वपूर्ण छ

सम्बन्धित प्रश्नहरू