எது ஒரு JS bundle-ஐ வளர்க்கிறது, மேலும் size ஏன் பாதிக்கிறது?

Question

IT Interview Practice · Accepted Answer

**bundle** என்பது உங்கள் build tool package செய்து browser-க்கு அனுப்பும் JavaScript. இது முக்கியமாக **dependency-கள்**, **duplicate செய்யப்பட்ட code**, மற்றும் **page-க்கு இன்னும் தேவையில்லாத code-ஐ அனுப்புவதிலிருந்து** வளர்கிறது.

## எது அதை inflate செய்கிறது

- **கனமான 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-கள் மற்றும் duplicate dependency-கள்** — ஒரே package-இன் இரண்டு version-கள் இரண்டு முறை bundle செய்யப்படுகின்றன.

## size ஏன் பாதிக்கிறது

Byte-கள் சிறிய problem; **parsing மற்றும் execution** JS என்பது பெரிய problem. browser ஒவ்வொரு byte-ஐயும் download செய்து, பின்னர் parse, compile, மற்றும் main thread-இல் இயக்க வேண்டும் — அது ஒரு laptop-ஐ விட mid-range phone-இல் மிகவும் மெதுவானது. கனமான JS interactivity-ஐ தாமதப்படுத்தி **INP** மற்றும் **LCP**-ஐ நேரடியாக மோசமாக்குகிறது.

## இது ஏன் முக்கியம்

"library-ஐச் சேர்த்துவிடு" என்பதுதான் app-கள் அமைதியாக மெதுவாகும் விதம். bundle பெருகுவதற்கு முன் நீங்கள் *dependency ஒன்றுக்கான செலவு* பற்றி சிந்திக்கிறீர்களா மற்றும் per-function import-கள், tree shaking, மற்றும் code splitting-ஐ நாடுகிறீர்களா என்பதைப் பார்க்க interviewer-கள் விரும்புகிறார்கள் — குறிப்பாக உங்கள் பயனர்களின் phone-கள் உங்கள் dev machine-ஐ விட மிகவும் பலவீனமானவை என்பதால்.

எது அதை inflate செய்கிறது

size ஏன் பாதிக்கிறது

இது ஏன் முக்கியம்

தொடர்புடைய கேள்விகள்