빌드 도구란
현대 프론트엔드 개발에서 빌드 도구는 필수입니다. 40년간 개발 도구의 변천을 지켜본 저로서는 빌드 도구가 개발 경험을 크게 좌우한다고 확신합니다. 모듈 번들링, 트랜스파일링, 코드 분할, 최적화를 수행합니다. 개발 서버를 제공하여 빠른 피드백을 가능하게 합니다.
Webpack
Webpack은 가장 성숙한 번들러입니다. 풍부한 플러그인 생태계가 있습니다. 거의 모든 사용 사례를 커버합니다. 하지만 설정이 복잡하고 빌드 속도가 느릴 수 있습니다. 대규모 레거시 프로젝트에 적합합니다. Create React App이 내부적으로 사용합니다.
Vite
Vite는 Evan You(Vue 창시자)가 개발한 현대적 빌드 도구입니다. 개발 시 네이티브 ES 모듈을 사용하여 매우 빠릅니다. 프로덕션 빌드는 Rollup을 사용합니다. 설정이 간단하고 기본값이 훌륭합니다. Vue, React, Svelte 등을 지원합니다. 새 프로젝트에 추천됩니다.
esbuild와 기타 도구
esbuild는 Go로 작성된 초고속 번들러입니다. Vite의 개발 서버 변환에 사용됩니다. 아직 풀 번들러로 사용하기에는 기능이 부족합니다. swc는 Rust로 작성된 트랜스파일러입니다. Turbopack(Vercel)은 Rust 기반 차세대 번들러입니다. Parcel은 제로 설정 번들러입니다.
선택 가이드
새 프로젝트에는 Vite를 추천합니다. 빠르고 설정이 쉽습니다. 레거시 프로젝트, 특수 요구사항에는 Webpack이 유연합니다. 라이브러리 빌드에는 Rollup이 적합합니다. 빌드 속도가 중요하면 esbuild, swc를 활용합니다. 프레임워크 CLI(CRA, Vue CLI, Next.js)가 기본 설정을 제공하므로 직접 설정이 필요 없는 경우가 많습니다.
댓글
0