bundler(번들러)

Bundler는 여러 개의 JavaScript 파일(모듈)과 에셋(CSS, 이미지 등)을 하나 또는 소수의 파일로 합치는 도구다. 대표적으로 webpack, Rollup, Parcel이 있다.

해당 개념이 필요한 이유

• 브라우저가 수백~수천 개의 개별 모듈 파일을 각각 HTTP 요청하면 네트워크 비용이 막대
• CommonJS 등 브라우저가 이해할 수 없는 모듈 형식을 변환해야 함
• CSS, 이미지, 폰트 등 다양한 에셋을 JavaScript와 함께 통합 관리 필요
• 최적화(minification, tree-shaking, code splitting) 수행

AS-IS (번들러 없이)

브라우저 요청:
GET index.html
GET app.js
GET utils.js
GET lodash.js    ← 600+ 내부 모듈이면 600+ 요청
GET styles.css
GET ...
→ 수백 개의 HTTP 요청 = 느린 로딩

TO-BE (번들러 사용)

빌드 시: [app.js + utils.js + lodash.js + ...] → bundle.js (1개 파일)

브라우저 요청:
GET index.html
GET bundle.js     ← 최적화된 단일 파일
GET styles.css
→ 최소한의 HTTP 요청 = 빠른 로딩

webpack의 핵심 개념

webpack은 가장 널리 사용되는 번들러로, 5가지 핵심 개념이 있다:

개념	역할	기본값
Entry	의존성 그래프의 시작점	./src/index.js
Output	번들 파일 출력 위치	./dist/main.js
Loaders	JS가 아닌 파일(CSS, TS 등) 변환	없음
Plugins	번들 최적화, 에셋 관리 등 확장	없음
Mode	development / production 최적화	production

// webpack.config.js 기본 구조
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },
  module: {
    rules: [{ test: /\.css$/, use: 'css-loader' }]  // Loader
  },
  plugins: [new HtmlWebpackPlugin()],                // Plugin
  mode: 'production'
};

Dependency Graph (의존성 그래프)

번들러의 핵심 동작 원리:

entry: index.js
  ├── import App from './App.js'
  │     ├── import Button from './Button.js'
  │     └── import './App.css'
  ├── import { createStore } from 'redux'
  └── import './global.css'

→ 이 그래프를 탐색하여 모든 의존성을 수집 → 번들로 합침

Vite와의 관계: Vite는 개발 시에는 번들링을 건너뛰고 Native ESM을 사용하지만, 프로덕션 빌드에서는 Rollup을 번들러로 사용한다. 이것이 Vite가 빠른 이유의 핵심이다 — 개발 중에는 번들러의 가장 느린 부분(전체 크롤링 + 빌드)을 제거한 것.

참고 문서

• webpack - Concepts