코드 분할(code splitting)과 트리 셰이킹(tree shaking)이란 무엇인가요?

Question

IT Interview Practice · Accepted Answer

둘 다 사용자가 다운로드하는 JavaScript를 줄입니다. **코드 분할**은 번들을 필요할 때 로드되는 청크로 나누고, **트리 셰이킹**은 절대 쓰지 않는 코드를 제거합니다. 서로 보완적입니다. *무엇이* 로드될지 분할하고, 각 청크 안의 *죽은* 코드를 털어냅니다.

## 코드 분할

하나의 큰 번들 대신, 각 라우트나 무거운 기능이 필요할 때만 페치되는 별도 청크가 되도록 앱을 분할합니다:

```js
// 라우트 기반 분할: 대시보드 코드는 방문 전까지 다운로드 안 됨
const Dashboard = lazy(() => import("./routes/Dashboard")); // 자체 청크

// 컴포넌트 기반 분할: 무거운 에디터를 상호작용 시 로드
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // 클릭 시 페치
  openEditor();
};
```

동적 `import()`가 신호입니다 — 번들러는 그 경계에서 별도 파일을 내보냅니다.

## 트리 셰이킹

번들러는 ES 모듈 `import`/`export`를 정적으로 분석하여 아무도 참조하지 않는 export를 버립니다. 이는 **ESM**(정적, 분석 가능)에서만 동작하며 CommonJS `require`에서는 안 됩니다:

```js
import { debounce } from "utils"; // debounce만 유지; throttle 등은 털려 나감
```

이는 `package.json`의 `"sideEffects": false`와 함수별 import에 의존합니다. 배럴(barrel) 파일이나 부작용이 있는 모듈은 트리 셰이킹을 무력화할 수 있습니다.

## 트레이드오프

- 과도한 분할 → 작은 요청이 많아지고 워터폴 발생. 관련 코드를 묶으세요.
- 트리 셰이킹은 취약합니다 — 부작용을 잘못 표시하면 죽은 코드가 남습니다.

## 왜 중요한가

이 둘은 "JS를 덜 보내기"의 두 지렛대입니다. 면접관은 지원자가 코드 분할이 *언제 무엇이 로드될지*를 결정하고, 트리 셰이킹이 *애초에 무엇이 들어갈지*를 결정하며, 트리 셰이킹이 정적 ESM에 의존한다는 것을 아는지 보고 싶어 합니다 — 실제로 번들을 튜닝해 본 사람과 글로만 읽은 사람을 가르는 디테일입니다.

코드 분할

트리 셰이킹

트레이드오프

왜 중요한가

관련 질문