번들러

여러 개의 JavaScript 파일과 리소스를 하나(또는 몇 개)의 파일로 묶어주는 도구입니다.

왜 필요한가?

번들러 없이
index.html이 파일을 하나씩 요청
<script src="react.js">
<script src="lodash.js">
<script src="app.js">
<script src="utils.js">
...
→ HTTP 요청 수 증가 → 로딩 느림 X
→ 파일 간 의존성 관리 어려움 X

번들러 사용 후
모든 파일 → [번들러] → bundle.js 하나
→ HTTP 요청 1번 O
→ 의존성 자동 관리 O

번들러가 하는 일

1. 의존성 분석
   index.js → import utils.js → import lodash
   → 의존성 트리 파악

2. 번들링
   여러 파일 → 하나의 파일로 합침

3. 트랜스파일링
   최신 JS(ES6+) → 구형 브라우저용 JS (Babel 연동)
   TypeScript → JavaScript

4. 최적화
   Tree Shaking  : 사용하지 않는 코드 제거
   Minification  : 공백/주석 제거, 변수명 축약
   Code Splitting: 필요한 코드만 분리해서 로드

대표적인 번들러

번들러특징주로 사용
Webpack가장 널리 사용, 강력한 플러그인React CRA, Vue CLI
Vite매우 빠른 개발 서버, ES Module 기반최신 프로젝트
Rollup라이브러리 번들링에 최적화라이브러리 배포
esbuildGo 기반으로 매우 빠름Vite 내부 사용

Webpack 기본 설정

// webpack.config.js
module.exports = {
    entry: './src/index.js',      // 시작점
    output: {
        filename: 'bundle.js',    // 출력 파일
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'   // JS 트랜스파일링
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']  // CSS 처리
            }
        ]
    }
};

Vite가 빠른 이유

Webpack (기존)
→ 전체 파일을 번들링 후 개발 서버 시작
→ 파일 많을수록 시작 느림 X

Vite
→ 번들링 없이 ES Module로 바로 개발 서버 시작
→ 변경된 파일만 즉시 교체 (HMR)
→ 시작 속도 매우 빠름 O

프로덕션 빌드 시에는 Rollup으로 번들링

Tree Shaking

// utils.js
export function used() { return '사용됨'; }
export function unused() { return '안사용됨'; }

// index.js
import { used } from './utils';  // used만 import

// 번들 결과
→ unused() 코드 제거 O (번들 크기 감소)

Code Splitting

// 필요한 순간에만 로드 (Dynamic Import)
const handleClick = async () => {
    const { heavyModule } = await import('./heavyModule');
    heavyModule.doSomething();
};
// → 초기 번들 크기 감소 → 첫 로딩 빠름 O

번들러는 "개발 편의성(모듈화)과 배포 성능(최적화)을 동시에 챙겨주는 도구" 입니다. 최근에는 빠른 개발 경험으로 Vite가 새 프로젝트의 표준으로 자리잡고 있습니다.

CSLOG에서 보기