কী একটি JS bundle-কে বড় করে, এবং size কেন ক্ষতি করে?

Question

IT Interview Practice · Accepted Answer

একটি **bundle** হলো সেই JavaScript যা আপনার build tool package করে browser-এ পাঠায়। এটি মূলত **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 করতে হয় — আর এটি একটি mid-range phone-এ একটি laptop-এর চেয়ে অনেক ধীর। ভারী JS interactivity বিলম্বিত করে এবং সরাসরি **INP** ও **LCP** খারাপ করে।

## এটি কেন গুরুত্বপূর্ণ

"শুধু library-টা যোগ করে দাও" এভাবেই app নীরবে ধীর হয়ে যায়। ইন্টারভিউয়াররা দেখতে চান আপনি *dependency-প্রতি খরচ* নিয়ে ভাবেন এবং bundle ফুলে ওঠার আগে per-function import, tree shaking, ও code splitting-এর দিকে ঝোঁকেন — বিশেষত যেহেতু আপনার ব্যবহারকারীদের phone আপনার dev machine-এর চেয়ে অনেক দুর্বল।

কী এটি স্ফীত করে

Size কেন ক্ষতি করে

এটি কেন গুরুত্বপূর্ণ

সম্পর্কিত প্রশ্ন