Code splitting và tree shaking là gì?

Question

IT Interview Practice · Accepted Answer

Cả hai đều cắt lượng JavaScript người dùng phải tải. **Code splitting** chia bundle thành các chunk tải theo nhu cầu; **tree shaking** loại bỏ code bạn không dùng. Chúng bổ trợ nhau: split *cái gì* tải, shake bỏ code *chết* bên trong mỗi chunk.

## Code splitting

Thay vì một bundle lớn, app được chia sao cho mỗi route hoặc tính năng nặng là một chunk riêng chỉ fetch khi cần:

```js
// Chia theo route: code dashboard chưa tải cho tới khi bạn vào trang đó
const Dashboard = lazy(() => import("./routes/Dashboard")); // chunk riêng

// Chia theo component: editor nặng tải khi tương tác
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetch khi click
  openEditor();
};
```

Cú pháp `import()` động là tín hiệu — bundler tạo một file riêng tại ranh giới đó.

## Tree shaking

Bundler phân tích tĩnh `import`/`export` của ES module và bỏ các export không ai tham chiếu. Nó chỉ chạy với **ESM** (tĩnh, phân tích được) — không phải `require` của CommonJS:

```js
import { debounce } from "utils"; // chỉ giữ debounce; throttle, v.v. bị shake bỏ
```

Nó dựa vào `"sideEffects": false` trong `package.json` và import theo từng hàm; barrel file hoặc module có side effect có thể phá vỡ nó.

## Đánh đổi

- Chia quá mức → nhiều request nhỏ và waterfall; hãy gom code liên quan lại.
- Tree shaking mong manh — một side effect đánh dấu sai sẽ giữ lại code chết.

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

Đây là hai đòn bẩy đằng sau "gửi ít JS hơn". Người phỏng vấn muốn bạn biết code splitting quyết định *cái gì tải khi nào*, tree shaking quyết định *có gì trong đó*, và rằng tree shaking phụ thuộc vào ESM tĩnh — chi tiết phân biệt người đã thực sự tinh chỉnh bundle với người chỉ đọc về nó.

Code splitting

Tree shaking

Đánh đổi

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

Câu hỏi liên quan