무엇이 JS 번들을 커지게 하며, 크기가 왜 해로운가요?

Question

IT Interview Practice · Accepted Answer

**번들**은 빌드 도구가 패키징하여 브라우저로 보내는 JavaScript입니다. 번들은 주로 **의존성**, **중복 코드**, 그리고 **페이지가 아직 필요하지 않은 코드까지 보내는 것**에서 커집니다.

## 무엇이 번들을 부풀리는가

- **무거운 라이브러리** — 날짜나 아이콘 라이브러리 하나가 수백 KB를 더할 수 있습니다. 함수 하나를 위해 `lodash` 전체를 import하면 전부를 끌어옵니다.
- 필요한 것만이 아니라 **전부를 import**하는 것:

```js
import _ from "lodash";           // ~70KB — 라이브러리 전체
import debounce from "lodash/debounce"; // ~2KB — 필요한 함수만
```

- **코드 분할 없음** — 전체 앱(모든 라우트, 모든 모달)이 하나의 파일로 묶여 미리 로드됩니다.
- **폴리필과 중복 의존성** — 같은 패키지의 두 버전이 두 번 번들됨.

## 크기가 왜 해로운가

바이트는 작은 문제이고, JS를 **파싱하고 실행하는 것**이 큰 문제입니다. 브라우저는 모든 바이트를 다운로드한 뒤 메인 스레드에서 파싱, 컴파일, 실행해야 하며, 이는 노트북보다 중급 스마트폰에서 훨씬 느립니다. 무거운 JS는 상호작용 가능 시점을 늦추고 **INP**와 **LCP**를 직접적으로 악화시킵니다.

## 왜 중요한가

"그냥 라이브러리 추가하지"가 앱이 조용히 느려지는 방식입니다. 면접관은 지원자가 *의존성당 비용*을 고려하고, 번들이 부풀기 전에 함수별 import, 트리 셰이킹, 코드 분할을 선택하는지 보고 싶어 합니다 — 특히 사용자의 스마트폰이 여러분의 개발 기기보다 훨씬 약하기 때문입니다.

무엇이 번들을 부풀리는가

관련 질문

크기가 왜 해로운가

왜 중요한가