[Web] 번들러(Bundler)의 종류 및 비교 분석

번들러(Bundler)란?

브라우저는 모듈화된 자바스크립트는 읽지 못하기 때문에 브라우저에서 코드를 실행하려면 번들러가 필요하다. 즉 번들러란 모듈화된 여러 개의 자바스크립트 파일, CSS, 이미지 등의 리소스를 하나 또는 여러 개의 번들(bundle)로 묶어주는 도구이다. 번들러를 통해 브라우저가 불러오는 파일의 수를 줄일 수 있어 관리가 편리해지고 성능 최적화가 가능하다.

번들러가 하는 일

1. 엔트리 파일에서 시작해 의존성을 분석한다.

• 번들러는 entry로 지정한 시작 파일(index.js, main.tsx 등)에서 코드를 분석한다.
• 이 파일이 import, require 등으로 불러오는 다른 파일들을 하나씩 추적한다.

2. 모듈 그래프를 생성한다.

• 의존성 분석을 통해 모든 파일 간의 연결 관계(모듈 그래프)를 생성한다.
• 이 그래프는 트리 형태이며, 파일이 어떤 파일을 참조하는지 나타낸다.

3. 각 파일을 하나의 표준 형식으로 변환한다.(트랜스파일링 등)

• ES6, TypeScript, JSX, SCSS 등 다양한 포맷을 일반적인 JS/CSS로 변환한다.
  • babel → ES6+ → ES5
  • TypeScript → JavaScript
  • JSX → JS
  • SCSS → CSS
• 이 단계에서 로더(loader), 플러그인(plugin) 등이 동작한다.

4. 모든 모듈을 하나(또는 여러 개)의 파일로 병합한다.

• 변환된 모든 모듈을 하나 또는 여러 개의 번들 파일로 묶는다.
• 예: bundle.js, vendor.js, style.css 등

5. 최적화(옵션에 따라)

Tree-shaking

• 사용되지 않는 코드를 제거해서 용량을 줄인다.
• 예: export를 제외한 실제 import하지 않은 함수들은 번들에서 제거한다.

코드 압축(Minification)

• 변수명을 짧게 바꾸고, 들여쓰기/공백 등을 제거해 파일 크기를 최소화한다.

코드 스플리팅(Code Splittting)

• 초기 로딩 성능을 높이기 위해 필요한 부분만 나눠서 불러오는 방식이다.

6. 핫 리로딩(개발 서버 기능)

• 일부 번들러는 개발 중 변경된 파일만 실시간으로 반영하는 Hot Module Replacement(HMR) 기능도 제공한다.
• 이 기능은 번들러 자체 기능이거나 dev-senver와 함께 작동한다.

대표적인 번들러의 종류

1. Webpack

• Node.js 기반의 가장 강력하고 유연한 모듈 번들러이다.
• Entry → Loaders → Plugins → Output 구조로 유연하게 구성이 가능하다.
  • Entry: 앱이 시작되는 진입점 (ex: src/index.js)
  • Loaders: JS 이외의 파일(CSS, SCSS, TS 등)을 JS로 변환 (ex: babel-loader, css-loader)
  • Plugins: 번들링 프로세스를 확장 (ex: HtmlWebpackPlugin, MiniCssExtractPlugin)
  • Output: 번들링된 결과물의 위치 및 이름 지정
• 커뮤니티가 크고, 다양한 플러그인과 로더가 존재한다.

특징

• ESM 기반 사용 시 Tree-shaking을 지원한다.
• Dynamic import로 Code Splitting이 가능하다.
• HMR(Hot Module Replacement)를 지원한다.
• 웹팩 설정 파일(webpack.config.js)로 세밀하게 조정이 가능하다.

예시

// 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'] }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
};

2. esbuild

• Go 언어로 작성된 초고속 번들러이자 트랜스파일러이다.
• JS/TS 파일을 매우 빠르게 번들링 및 변환이 가능하다.
• Vite의 개발 서버 내부 엔진으로 사용된다.

특징

• 설정이 거의 필요 없다.
• 빌드 속도가 매우 빠르다.
• JSX, TS, ESM, CommonJS 등 다양한 포맷을 지원한다.
• 자체 CLI 또는 JS API로 사용이 가능하다.

예시

CLI

npx esbuild src/index.ts --bundle --outfile=dist/app.js

 

JS API

import { build } from 'esbuild';

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
});

 

3. Vite

• 빠른 개발, 빌드시 최적화된 번들링을 제공한다.
• 개발 중엔 번들링 없이 ESM 기반 모듈을 제공한다. → 즉각적인 HMR
• 개발환경에서는 esbuild를 이용해 빠르게 ESM 모듈을 제공한다.
• 빌드환경에서는 내부적으로 Rollup을 사용해 최적화된 번들을 생성한다.

특징

• 파일 기반의 라우팅, alias, 환경 변수를 지원한다.
• Vue, React, Svelte 등의 템플릿 제공한다. (npm create vite)
• 설정 없이도 작동하지만, vite.config.js로 확장이 가능하다.

예시

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

 

4. Rollup

• 모듈 번들링에 특화된 ESM 중심의 번들러이다.
• 작고 최적화된 번들 생성으로 Tree-shaking이 매우 효과적이다.
• 주로 라이브러리, 컴포넌트 패키징용으로 사용한다.
• 입력 파일(input)과 출력 파일(output)을 지정하는 구성이다.
• 플러그인 시스템은 Webpack보다 간단하지만 강력하다.

특징

• ESM 모듈 구조 최적화로 side-effect 없는 코드 제거에 강하다.
• React/Vue 라이브러리 작성 시 유용하다.
• .cjs, .esm, .umd 등 다양한 출력 형식을 지원한다.

예시

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
    },
  ],
  plugins: [babel({ babelHelpers: 'bundled' })],
};

5. Parcel

• 설정이 거의 필요 없는(zero-config) 번들러이다.
• 자동으로 파일 타입 감지한다. (→ TS, SCSS, JSX 등도 즉시 지원한다.)
• 개발서버, HMR, 빌드, 압축, 캐싱을 모두 자동 처리한다.
• 코드를 분석하여 의존성을 자동으로 구성한다.
• 멀티 스레드 처리로 빠른 빌드가 가능하다.
• 플러그인 없이도 대부분의 프로젝트 구성이 가능하다.

예시

# 설치 및 실행
npm install -g parcel-bundler
parcel index.html

참고

Module Bundler Introduction

번들러(Bundler)란?

[MFA] 번들러란?