📦 모듈 번들링의 원리 – Webpack, Vite, Tree-shaking 개념까지 완전 정리

📦 모듈 번들링의 원리 – Webpack, Vite, Tree-shaking 개념까지 완전 정리

자바스크립트가 파일 단위로 나뉘어 있을 때, 모듈을 하나의 파일로 묶고 최적화하는 과정을 모듈 번들링(Module Bundling)이라고 합니다.
이 글에서는 Webpack과 Vite의 번들링 구조를 비교하고, Tree-shaking 같은 최적화 기법까지 함께 설명합니다.

---

1. 모듈 번들링이 필요한 이유

• HTML에서 <script>로 여러 JS 파일을 불러오는 것은 비효율적
• 모듈 간 의존성을 자동 분석하여 하나 또는 여러 개의 번들 파일로 묶음
• 배포 최적화: 코드 압축, 캐싱 최적화, 사용되지 않는 코드 제거

// 실제 사용
import { add } from './math.js';
console.log(add(1, 2));

👉 이처럼 import된 모듈을 모두 분석해 하나의 파일로 묶습니다.

---

2. Webpack – 전통적이고 유연한 번들러

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
};

• 의존성 분석, CSS/이미지 포함, Hot Reload 등 풀 스택 번들링 지원
• 플러그인 기반 확장성이 높지만, 설정이 복잡할 수 있음

---

3. Vite – 모던 개발 환경용 번들러

Vite는 ESModules 기반의 개발 서버 + Rollup 기반의 빌드 구조를 갖습니다.

// vite.config.js
export default {
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: './index.html'
    }
  }
}

• 개발 시 번들 없이 빠른 HMR(핫 모듈 리플레이스먼트)
• 빌드 시 Rollup으로 정적 번들링
• Vue, React 등의 프레임워크와 통합 용이

---

4. Tree-shaking – 사용되지 않는 코드 제거

Tree-shaking은 사용하지 않는 모듈/함수를 제거하여 번들 크기를 줄이는 최적화 기법입니다.
정적 분석 가능한 ESModules(import/export)에서만 가능하며, side-effect 없는 코드여야 합니다.

// math.js
export function add(a, b) { return a + b }
export function subtract(a, b) { return a - b }

// index.js
import { add } from './math.js'; // subtract는 사용되지 않음

👉 번들 시 subtract는 제거됩니다.

---

5. Dead Code 제거 조건

• ESModules 사용 (CommonJS는 안 됨)
• sideEffects: false 설정 (Webpack에서)
• 코드가 정적 분석 가능해야 함 (동적 require X)

// package.json
{
  "sideEffects": false
}

---

6. 번들링 전략 요약

항목	Webpack	Vite
개발 서버	번들된 결과로 실행	ESM 기반 비번들 실행
빌드 방식	자체 분석/번들링	Rollup 기반 정적 번들링
속도	초기 느림 (캐시 필요)	초기 빠름 (HMR 빠름)
Tree-shaking	가능 (ESM 기반)	가능 (Rollup 내장)

---

📌 마무리

모듈 번들링은 웹 애플리케이션을 최적화하고 유지보수 가능한 구조로 만들기 위해 필수적인 과정입니다.
Webpack은 커스터마이징과 플러그인 생태계가 강력하고, Vite는 빠른 개발 경험과 직관적인 설정이 장점입니다.
Tree-shaking, 코드 스플리팅 등의 개념은 성능 최적화의 핵심이므로 반드시 이해하고 적용해보세요.

다음 글에서는 IIFE(즉시 실행 함수 표현식)와 네임스페이스 충돌 방지 패턴의 역사적 배경과 활용법을 정리하겠습니다.