อะไรทำให้ JS bundle โตขึ้น และทำไมขนาดจึงเป็นปัญหา?

Question

IT Interview Practice · Accepted Answer

**bundle** คือ JavaScript ที่เครื่องมือ build ของคุณแพ็กและส่งไปยังเบราว์เซอร์ มันโตขึ้นหลัก ๆ จาก **dependency**, **โค้ดที่ซ้ำกัน**, และ **การส่งโค้ดที่หน้ายังไม่จำเป็นต้องใช้**

## อะไรทำให้มันบวม

- **ไลบรารีที่หนัก** — ไลบรารี date หรือ icon เพียงตัวเดียวอาจเพิ่มขึ้นเป็นร้อย KB การ import ทั้ง `lodash` เพื่อฟังก์ชันเดียวจะดึงทั้งก้อนเข้ามา
- **การ import ทุกอย่าง** แทนที่จะ import เฉพาะที่ใช้:

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

- **ไม่มี code splitting** — ทั้งแอป (ทุก route, ทุก modal) ถูกรวมเป็นไฟล์เดียวที่โหลดล่วงหน้า
- **Polyfill และ dependency ที่ซ้ำกัน** — แพ็กเกจเดียวกันสองเวอร์ชันถูก bundle เข้ามาสองครั้ง

## ทำไมขนาดจึงเป็นปัญหา

ไบต์เป็นปัญหาเล็ก; **การ parse และ execute** JS ต่างหากที่เป็นปัญหาใหญ่ เบราว์เซอร์ต้องดาวน์โหลด แล้ว parse, compile, และรันทุกไบต์บน main thread — และนั่นช้ากว่ามากบนโทรศัพท์ระดับกลางเมื่อเทียบกับแล็ปท็อป JS ที่หนักทำให้การโต้ตอบ (interactivity) ล่าช้า และทำให้ **INP** และ **LCP** แย่ลงโดยตรง

## ทำไมจึงสำคัญ

"แค่เพิ่มไลบรารีเข้าไป" คือวิธีที่แอปค่อย ๆ ช้าลงอย่างเงียบ ๆ ผู้สัมภาษณ์อยากเห็นว่าคุณคิดถึง *ต้นทุนต่อ dependency* และเลือกใช้การ import ราย function, tree shaking, และ code splitting ก่อนที่ bundle จะบวม — โดยเฉพาะเมื่อโทรศัพท์ของผู้ใช้อ่อนกว่าเครื่อง dev ของคุณมาก

อะไรทำให้มันบวม

ทำไมขนาดจึงเป็นปัญหา

ทำไมจึงสำคัญ

คำถามที่เกี่ยวข้อง