Cái gì làm JS bundle phình to, và tại sao kích thước gây hại?

Question

IT Interview Practice · Accepted Answer

**Bundle** là phần JavaScript mà công cụ build đóng gói và gửi tới trình duyệt. Nó phình to chủ yếu do **dependency**, **code trùng lặp**, và **gửi code mà trang chưa cần tới**.

## Cái gì làm nó phình

- **Thư viện nặng** — một thư viện date hoặc icon có thể thêm hàng trăm KB. Import cả `lodash` chỉ để dùng một hàm sẽ kéo theo toàn bộ.
- **Import tất cả** thay vì đúng thứ bạn dùng:

```js
import _ from "lodash";           // ~70KB — toàn bộ thư viện
import debounce from "lodash/debounce"; // ~2KB — chỉ hàm bạn cần
```

- **Không code splitting** — cả app (mọi route, mọi modal) bị gói vào một file tải ngay từ đầu.
- **Polyfill và dependency trùng** — hai phiên bản của cùng một package bị gói hai lần.

## Tại sao kích thước gây hại

Số byte là vấn đề nhỏ; **parse và execute** JS mới là vấn đề lớn. Trình duyệt phải tải, rồi parse, compile và chạy mọi byte trên main thread — và việc đó chậm hơn nhiều trên điện thoại tầm trung so với laptop. JS nặng trì hoãn khả năng tương tác và làm xấu trực tiếp **INP** lẫn **LCP**.

## Tại sao điều này quan trọng

"Cứ thêm thư viện đi" chính là cách các app âm thầm trở nên chậm. Người phỏng vấn muốn thấy bạn nghĩ về *chi phí mỗi dependency* và ưu tiên import theo từng hàm, tree shaking, code splitting trước khi bundle phình lên — nhất là vì điện thoại của người dùng yếu hơn nhiều so với máy dev của bạn.

Cái gì làm nó phình

Tại sao kích thước gây hại

Tại sao điều này quan trọng

Câu hỏi liên quan