번들러를 사용하는 이유는 무엇인가요?

번들러(bundler) 는 여러 모듈과 자산(JS·CSS·이미지 등)을 의존성 그래프로 분석해, 브라우저가 효율적으로 로드할 수 있는 하나 또는 몇 개의 파일로 묶고 최적화하는 도구입니다. webpack, Vite(롤업/esbuild 기반), Rollup, esbuild, Parcel 등이 있습니다.

왜 필요한가

• 요청 수 감소·의존성 해결 — 수백 개 모듈을 그대로 두면 요청이 많아지고 로딩 순서·의존성 관리가 어렵습니다. 번들러가 묶어 해결합니다.
• 모듈 시스템 호환 — ESM/CommonJS, node_modules 의존성을 브라우저가 이해할 형태로 변환·연결.
• 트랜스파일 연계 — TypeScript·JSX·최신 문법을 Babel/swc/esbuild로 변환해 함께 처리.
• 최적화 — minify, 트리 셰이킹(미사용 코드 제거), 코드 스플리팅(필요할 때만 로드), 에셋 해싱(캐시 버스팅).
• 비(非) JS 자산 처리 — CSS, 이미지, 폰트 등을 import해 파이프라인에서 변환·인라인·최적화.
• 개발 경험(DX) — dev 서버, HMR(핫 모듈 교체), 소스맵 제공.

번들러가 하는 일 흐름

엔트리(예: main.tsx)
  → 의존성 그래프 분석(import 따라가며)
  → 변환(트랜스파일·로더/플러그인)
  → 최적화(트리 셰이킹·minify·스플리팅)
  → 산출물(해시 붙은 청크 파일들)

참고: HTTP/2 멀티플렉싱과 ESM 네이티브 지원으로 “번들이 필요 없다”는 의견도 있지만, 트리 셰이킹·코드 스플리팅·자산 최적화·호환성 측면에서 실무에서는 여전히 번들러(또는 빌드 도구)를 사용합니다.