번들링

여러 개로 구성된 소스 파일을 한 개 또는 그 이상의 작은 단위로 합쳐서 제공하는 것

왜 하는가?

목적	설명
성능 개선	여러 파일을 별개로 받으면 네트워크 요청 횟수가 증가한다. 번들링을 통해 하나의 파일만 다운로드하면 웹사이트 로딩 속도가 빨라진다.
파일 크기 최적화	변수명 축소, 줄바꿈 제거, 불필요한 공백 제거로 파일 다운로드와 JS 해석이 빨라진다.
호환성 문제 해결	다양한 모듈 형식을 브라우저가 이해할 수 있는 단일 형식으로 통일한다.
개발 도구 통합	다른 개발 도구와의 원활한 통합을 지원한다.

번들링의 역할

코드 분할

단순히 하나의 파일로 합치는 것 이상으로, 적당한 크기로 파일을 나누는 것도 좋은 번들러의 미덕이다.

동적 로딩이 필요한 경우
대규모 라이브러리를 사용해야 하는 경우
네트워크 오버헤드 감소가 필요한 경우

트리 셰이킹

사용하지 않는 코드를 제거하여 번들 크기를 줄인다.

난독화 및 압축

코드를 읽기 어렵게 만들고 크기를 줄인다.

웹팩 (Webpack)

웹 서비스 번들의 표준

단순히 자바스크립트를 묶는 데 그치지 않고 CSS, 이미지, 폰트 등 웹 애플리케이션에서 사용되는 거의 모든 리소스를 효율적으로 관리하고 번들링할 수 있다. 강력한 플러그인 및 로더 시스템을 통해 다양한 확장성과 유연성을 제공하여 대규모 프로젝트에서도 안정적으로 사용된다.

웹팩 주요 특징

특징	설명
다양한 모듈 번들링	JS 외 다양한 리소스 처리
코드 분할	필요에 따라 청크 분리
로더	다양한 파일 형식 처리
플러그인	기능 확장
개발 환경 지원	HMR (Hot Module Replacement)
최적화	트리 셰이킹, 코드 압축, 난독화

웹팩 기본 개념

개념	설명
의존성 그래프	모듈 목록 및 시작점을 토대로 애플리케이션을 재귀적으로 빌드하여 필요한 모듈을 순서에 맞춰 번들 파일로 합치기 위해 사전에 만드는 그래프
엔트리 (Entry)	의존성 그래프를 생성하기 위한 최초 진입점
아웃풋 (Output)	번들 파일의 생성 위치와 파일명을 지정하는 설정
모드 (Mode)	웹팩 내장 환경변수로, 내장 최적화를 활성화한다.

로더 (Loader)

웹팩이 기본적으로 읽을 수 있는 파일은 JS, JSON 등 몇 가지뿐이다. 로더를 통해 CSS 등 다양한 파일을 처리할 수 있다.

필수 속성

test: 어떤 파일을 불러올지 정규 표현식으로 선언
use: 해당 파일을 읽기 위해 사용할 로더 지정

주요 로더 종류

로더	용도
`babel-loader`	ES6+ 트랜스파일링
`ts-loader`	TypeScript 컴파일
`css-loader`	CSS 파일 해석
`style-loader`	CSS를 DOM에 주입
`sass-loader`	Sass/SCSS 컴파일
`file-loader`	파일을 URL로 변환
`url-loader`	작은 파일을 Base64로 인라인
`raw-loader`	파일을 문자열로 가져오기

플러그인 (Plugin)

웹팩 기능을 확장하기 위한 목적으로 만들어진다.

롤업 (Rollup)

패키지 번들의 선두주자

코드 최적화와 효율적인 번들링에 특화되어 있다. ES 모듈을 기본적으로 지원하도록 설계되어 현대적인 자바스크립트 프로젝트에서 매우 유용하다.

트리 셰이킹 기능이 강력해서 사용하지 않는 코드를 제거함으로써 최종 번들의 크기를 줄이는 데 탁월하다. 라이브러리 제작이나 경량화가 중요한 프로젝트에서 널리 채택된다.

롤업의 특징

ES Module 기반 모듈 번들링
여러 형태의 번들 출력 지원 (ESM, CJS, UMD 등)
강력한 트리 셰이킹

주요 설정 필드

필드	설명
`input`	진입점 파일
`external`	번들에서 제외할 외부 의존성
`output.file`	출력 파일 경로
`output.dir`	출력 디렉토리
`output.name`	UMD 번들의 전역 변수명
`output.globals`	외부 모듈의 전역 변수 매핑
`plugins`	플러그인 배열

Vite

번들 도구의 신흥 강자

전통적인 번들러와는 다른 접근 방식을 취한다. 개발 환경에서의 빠른 HMR과 빌드 속도를 강조한다.

자바스크립트 번들링이 느린 이유

동적 타입 언어: 런타임에 타입 체크 수행
JIT 컴파일: 미리 컴파일되는 언어보다 추가적인 오버헤드 존재
단일 스레드 이벤트 루프: 병렬 처리의 한계

네이티브 빌드 도구의 등장

번들링 작업을 굳이 자바스크립트가 할 필요가 있을까? 자바스크립트로 작성되지 않은 빌드 도구가 등장하기 시작했다.

도구	작성 언어	특징
esbuild	Go	매우 빠른 번들링
SWC	Rust	빠른 트랜스파일링
Turbopack	Rust	Next.js 팀 개발
Biome	Rust	Linting + Formatting
Parcel	Rust (일부)	Zero-config 번들러

Vite가 빠른 이유

개발 환경에서 번들링 없음: ES Module 방식으로 코드를 제공한다. 파일이 변경될 때마다 모든 파일을 HMR로 재기동하는 것이 아니라 필요한 파일만 새롭게 컴파일해서 빠르게 로드한다.
esbuild 사용: tsc 대신 esbuild를 사용하여 트랜스파일링 속도를 대폭 향상시킨다.