Bundle, Bundler에 대하여

1. 번들이란?

브라우저는 HTML, JS, CSS, 이미지 등 수많은 파일을 요청해서 페이지를 구성함

하지만 요청 수가 많을수록 네트워크 병목이 생기고, 로딩 속도가 느려짐

👉🏻 이를 해결하기 위해 여러 파일을 하나로 묶는 과정이 필요함, 그 결과물이 바로 번들(bundle)

 

1-1. 번들이 필요한 이유는?

1. HTTP 요청 수 감소

• 여러 JS/CSS 파일을 개별로 불러오면 매번 네트워크 요청 발생
• 번들을 통해 하나의 큰 파일로 합치면 성능 개선

2. 파일 의존성 자동 관리

• 직접 <script> 태그 순서 신경 안 써도 됨
• import, require 등을 통해 모듈 간 의존성을 추적하여 자동 정렬됨

3. 코드 난독화 & 압축

• 프로덕션 환경에서는 코드가 압축되고 변수명이 짧아짐 (예: a, b, c)
• 크기 줄고 보안성도 어느 정도 향상됨

4. 코드 분할(Code Splitting)

• 초기 로딩 속도 개선을 위해 필요할 때만 로드되는 파일을 따로 분리 가능

 

2. 번들러(bundle-er)란?

번들 작업을 자동으로 처리해 주는 도구

 

2-1. 번들러의 종류

이름	특징
Webpack	설정 유연함, 생태계 가장 큼, 복잡도 높음
Vite	빠른 개발 서버, ESBuild 기반, 최신 대세
Parcel	설정 거의 없음, 빠르게 시작 가능
Rollup	라이브러리 번들링에 특화, 작고 깔끔한 번들 생성

 

2-1-1. Webpack 용어

1. Entry: 번들링을 시작할 때 파일(진입점)
2. Output: 번들링한 결과물을 저장할 위치와 파일명
3. Loaders: Webpack은 JS와 JSON만 해석할 수 있으므로, HTML/CSS/TS/SCSS 등을 처리하기 위한 
4. Plugins: Webpack 번들링 전체 프로세스를 확장하거나 제어할 수 있음
5. Mode: 환경에 따라 설정을 구분할 수 있음
6. Browswer Compatibility: ES6 이상의 모듈을 사용할 수 있지만, 해당 문법을 지원하지 않으면 Babel과 함께 씀
7. Dependency Graph: 각 파일의 의존 관계를 분석해서 최종적으로 하나 또는 여러 개의 번들 파일로 출력함

 

2.2 VITE는 왜 빠른가?

Vite는 내부적으로 ESBuild라는 초고속 빌더를 사용함

👉🏻 Webpack처럼 전체를 미리 번들하지 않고, 요청된 모듈만 빠르게 제공함 (개발 서버 기준)

 

• 번들링은 build 시점에만 일어남
• 개발 중에는 ESM 기반으로 on-demand 로드됨

👉🏻 덕분에 HMR 속도가 빠르고, 초기 개발 환경 세팅이 매우 빠름

 

2-3. 번들러 없이 React 앱 만들면?

• JSX는 브라우저가 이해 못 함 → Babel 필요
• 모듈 import도 브라우저에서 인식 불가 → 번들러 필요
• CSS, 이미지 등도 직접 다뤄야 함 → 비효율적

결론: 현대 웹 개발에서 번들러는 필수적임

👉🏻 단순히 파일을 묶는 수준을 넘어서, 모듈 시스템 해석, 빌드 최적화, 실시간 반영(HMR) 등 개발 생산성과 성능 개선에 기여함

 

3. Reference

https://webpack.kr/concepts#entry

Concepts | 웹팩

https://ko.vite.dev/guide/

Vite