JavaScript 번들러는 여러 모듈을 하나(또는 몇 개)의 파일로 합치고 최적화한다. 도구마다 개발 경험, 빌드 속도, 출력 최적화가 다르다.
번들러 비교표
| 항목 | Vite | Webpack | esbuild | Rollup |
|---|
| 언어 | TypeScript | JavaScript | Go | JavaScript |
| 개발 서버 | ES Modules (HMR) | 번들링 기반 | 없음 (주로 라이브러리) | 없음 |
| 빌드 속도 | 빠름 (Rollup 기반) | 보통~느림 | 매우 빠름 | 보통 |
| 코드 스플리팅 | 자동 | 수동 설정 | 기본 지원 | 수동 설정 |
| 플러그인 | Vite/Rollup 호환 | 방대한 생태계 | esbuild 플러그인 | 방대함 |
| 주 용도 | 앱 개발 | 앱 개발 | 라이브러리/도구 | 라이브러리 |
| Tree Shaking | 자동 | 설정 필요 | 자동 | 최고 수준 |
Vite 설정
typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
target: 'es2020',
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
utils: ['lodash', 'date-fns']
}
}
},
minify: 'esbuild' // 기본값 (terser보다 빠름)
},
optimizeDeps: {
include: ['lodash'] // 사전 번들링
}
});
esbuild (빠른 변환/번들)
javascript
// esbuild API
import * as esbuild from 'esbuild';
await esbuild.build({
entryPoints: ['src/index.ts'],
bundle: true,
minify: true,
splitting: true, // 코드 스플리팅 (ESM only)
format: 'esm',
outdir: 'dist',
target: 'chrome90',
external: ['react'], // 번들에서 제외
define: {
'process.env.NODE_ENV': '"production"'
}
});
// 1000개 파일도 < 1초 빌드
Rollup (라이브러리 최적화)
javascript
// rollup.config.js
export default {
input: 'src/index.ts',
output: [
{ file: 'dist/bundle.cjs', format: 'cjs' }, // CommonJS
{ file: 'dist/bundle.mjs', format: 'esm' }, // ES Module
{ name: 'MyLib', file: 'dist/bundle.umd.js', format: 'umd' } // UMD
],
plugins: [
typescript(),
nodeResolve(),
terser()
],
external: ['react', 'react-dom'] // peerDependency 제외
};
관련 문서
