번들러 정리

번들러란 무엇인가

번들러는 여러개의 모듈 파일을 의존성 그래프로 분석해서 브라우저가 효율적으로 로드할 수 있게 하나 또는 여러 번들 파일로 만드는 도구이다.

 

번들러는 다음의 역할을 수행한다.

 

 

1. 모듈 의존성 그래프 생성

2. 다양한 자산(JS, CSS, 이미지 등) 변환

3. 브라우저 실행 가능한 번들 생성

4. 코드 최적화 수행(tree-shaking)

 

번들러가 중요한 이유는 의존성을 해석하고 최적화하는 점이다.

 

 

번들러가 필요한 이유

1. 브라우저는 모든 문법을 이해하지 못한다.

프론트엔드 코드는 Typescript, Jsx, 최신 ES 문법 등을 포함한다.

그러나 브라우저는 그 코드의 상당수를 직접 실행하지 못한다.

그래서 번들러는 ts의 js변환, jsx의 js 변환 등을 담당한다.

즉, 번들러는 코드를 실행 가능 상태로 변환하는 컴파일 단계를 포함한다.

2. 요청 수가 많아지면 로딩 성능이 급격히 나빠진다

모듈 기반 프로젝트에서는 파일 수가 쉽게 수백 개가 된다.

번들러가 없다면 다음의 상황이 발생한다.

 

1. HTTP 요청 수 증가

2. 초기 렌더링 지연

3. 캐싱 전략 적용 어려움

 

번들러는 이를 해결하기 위해 다음의 작업을 수행한다.

 

1. 파일 병합

2. 코드 스플리팅

3. 캐싱 가능한 청크 분리

 

3. 코드 최적화는 브라우저가 해주지 않는다

브라우저는 사용하지 않는 코드를 제거할 수 없다. 압축과 import 병합 또한 할 수 없다.

 

번들러는 이 단계에서 다음을 수행한다.

 

1. Tree shaking

2. Dead code 제거

3. Minification

4. Scope hoisting

번들러 내부 동작 구조

번들러는 일반적으로 다음 순서로 동작한다.

1. Entry 파일부터 시작

프로젝트의 시작점을 기준으로 의존성 탐색을 시작한다.

2. 의존성 그래프 생성

import 관계를 분석하여 모듈 그래프를 만든다.

이 그래프는 빌드 결과의 구조를 결정한다.

3. 파일 변환 단계

아래와 같은 작업이 수행된다.

 

1. TypeScript 트랜스파일

2. Babel 변환

3. CSS 처리

4. 이미지 처리

 

이 과정은 보통 loader, plugin, transform 단계로 구성된다.

4. 번들 생성

그래프를 기반으로 다음의 구조가 생성된다.

 

1. 단일 번들

2. 다중 청크

3. vendor 분리

5. 최적화 수행

실제 성능에 영향을 가는 다음 작업이 수행된다.

 

1. 압축

2. 트리 쉐이킹

3. 코드 스플리팅

주요 번들러들의 방향성 차이

Webpack

웹을 구성하는 모든 요소를 자바스크립트 모듈처럼 처리한다.

수천개의 plugin과 loader가 존재하여 확장성이 뛰어나다.

레거시 프로젝트 혹은 특수 빌드 설정이 필요한 대규모 엔터프라이즈 애플리케이션에 적합하다.

 

Rollup

코드를 정적으로 분석하여, 실제로 실행되지 않는 Dead Code를 찾아 정리한다.

ESM 모듈에 특화되어 있고, 번들러가 추가하는 불필요한 코드가 거의 없어 결과물이 미니멀하다.

라이브러리에 주로 사용한다.

 

esbuild

자바스크립트가 아닌 go로 작성되어 기존 번들러보다 속도가 빠르다.

속도가 빠른 대신 기능이 단순화되었고, 복잡한 설정이나 구형 브라우저 지원은 부족하다.

Vite

하이브리드 구조를 갖고 있는 것이  특징이다.

개발 환경에서는 번들링을 안하고, 수정된 파일만 esbuild를 사용하여 hot reload한다.

배포 환경에서는 검증된 번들러인 Rollup을 사용하여 최적화된 결과물을 만든다.

 

정리

번들러는 코드 실행 가능 상태로 변환하고 의존성을 해석하며 실행 성능을 최적화한다.

즉, 프론트엔드 빌드 파이프라인의 핵심 컴포넌트다.

 

번들러에 잘 알지 있지 못하서 정리하였다.