Webpack, Vite, Turbopack 비교와 Vite 마이그레이션 가이드
프론트엔드 개발에서 번들러는 개발 생산성에 직접적인 영향을 미친다. 프로젝트 규모가 커질수록 빌드 시간과 로컬 실행 속도는 실질적인 문제가
된다. 현재 시점 가장 많이 사용되는 번들러인 Webpack, Vite, Turbopack의 특징을 비교하고, Create React App에서 Vite로의 마이그레이션
핵심 사항을 정리한다.
1. 번들러 비교
1-1. Webpack
2012년부터 사용된 가장 인기 있는 번들러다. 방대한 플러그인 생태계를 갖추고 있으며, 거의 모든 빌드 요구사항을 충족할 수 있다.
레거시 브라우저 지원도 우수하다. 단점은 설정의 복잡성이다. webpack.config.js 파일이 수백 줄에 달하는 경우가 흔하며, 새로운
기능 추가 시 여러 로더와 플러그인을 설정해야 한다. 모든 파일을 번들링한 후 서버를 시작하기 때문에 프로젝트가 커질수록 느려진다.
1-2. Vite
Vue.js 창시자 Evan You가 개발한 빌드 도구다. 핵심은 로컬 실행 환경에서 번들링을 하지 않는다는 점이다. 브라우저가 모듈을 요청할 때
필요한 파일만 변환해서 제공한다. 이를 통해 프로젝트 규모와 무관하게 즉시 시작되며, 코드 수정사항도 즉시 반영된다. 프로덕션 빌드는
Rollup 기반으로 최적화된 번들을 생성한다. 설정은 vite.config.js 하나로 충분하며, TypeScript, JSX, CSS Modules를 기본 지원한다.
단점으로는 Webpack보다 생태계가 작고, 일부 레거시 라이브러리의 호환성 문제가 있을 수 있다.
1-3. Turbopack
Vercel에서 개발한 Rust 기반 번들러로 Next.js 13에서 알파로 도입되었고, Next.js 16에서 stable이 되었다. 변경된 부분만 재빌드하는 증분
컴퓨팅 기법을 사용한다. Next.js와의 통합도가 높으며, 기존 Webpack 설정의 상당 부분을 마이그레이션할 수 있다. 하지만 Next.js 외의
환경에서는 사용이 제한적이다.
2. CRA의 현황과 Vite 선택해야 하는 이유
Create React App은 2023년 이후 공식 유지보수가 사실상 중단되었다. React 공식 문서에서 CRA는 더 이상 다루지 않으며, Vite나 Next.js
같은 대안을 제시한다.
2-1. Vite를 선택해야 하는 이유
프로젝트가 커질수록 차이가 더 크게 나며, 대규모 프로젝트에서는 로컬 서버 시작과 코드 수정 반영 속도가 체감상 5배 이상 빠르다. 하루에
수십 번 서버를 재시작하고 코드를 수정하는 개발 과정에서 실질적인 시간 절약으로 이어진다. 설정도 간단하며, CRA처럼 eject 없이도 자유로운
커스터마이징이 가능하다. 프로덕션 빌드도 Rollup 기반으로 최적화되어 번들 크기가 작다.
2-2. Vite 마이그레이션 핵심 3가지
- 파일 구조
- index.html을 public에서 프로젝트 루트로 이동
- 환경변수 접두사 변경: REACT_APP_ → VITE_
- 환경변수 접근 방식 : process.env → import.meta.env
- 설정 파일
vite.config.js 생성하여 플러그인과 경로 설정
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: { alias: { '@': '/src' } },
});
- 호환성 처리
- SVG import: vite-plugin-svgr 설치 후 import Logo from './logo.svg?react'
- global 객체 에러: vite.config.js에 define: { global: 'globalThis' } 추가
- 레거시 라이브러리: optimizeDeps 설정으로 처리
3. 결론
Webpack은 성숙한 생태계를 가졌지만 프로젝트가 커질수록 느려진다. Vite는 ESM 기반으로 빠른 개발 경험을 제공하며, CRA 유지보수
중단으로 사실상 표준이 되어가고 있다. Turbopack은 Next.js에서 안정화되었지만 범용성은 낮다. 기존 CRA 프로젝트는 Vite로 마이그레이션 시
개발 생산성이 크게 향상되며, 투자 대비 효과가 확실하다.
⭐발표자 : 이선우님
Webpack, Vite, Turbopack 비교와 Vite 마이그레이션 가이드
프론트엔드 개발에서 번들러는 개발 생산성에 직접적인 영향을 미친다. 프로젝트 규모가 커질수록 빌드 시간과 로컬 실행 속도는 실질적인 문제가
된다. 현재 시점 가장 많이 사용되는 번들러인 Webpack, Vite, Turbopack의 특징을 비교하고, Create React App에서 Vite로의 마이그레이션
핵심 사항을 정리한다.
1. 번들러 비교
1-1. Webpack
2012년부터 사용된 가장 인기 있는 번들러다. 방대한 플러그인 생태계를 갖추고 있으며, 거의 모든 빌드 요구사항을 충족할 수 있다.
레거시 브라우저 지원도 우수하다. 단점은 설정의 복잡성이다. webpack.config.js 파일이 수백 줄에 달하는 경우가 흔하며, 새로운
기능 추가 시 여러 로더와 플러그인을 설정해야 한다. 모든 파일을 번들링한 후 서버를 시작하기 때문에 프로젝트가 커질수록 느려진다.
1-2. Vite
Vue.js 창시자 Evan You가 개발한 빌드 도구다. 핵심은 로컬 실행 환경에서 번들링을 하지 않는다는 점이다. 브라우저가 모듈을 요청할 때
필요한 파일만 변환해서 제공한다. 이를 통해 프로젝트 규모와 무관하게 즉시 시작되며, 코드 수정사항도 즉시 반영된다. 프로덕션 빌드는
Rollup 기반으로 최적화된 번들을 생성한다. 설정은 vite.config.js 하나로 충분하며, TypeScript, JSX, CSS Modules를 기본 지원한다.
단점으로는 Webpack보다 생태계가 작고, 일부 레거시 라이브러리의 호환성 문제가 있을 수 있다.
1-3. Turbopack
Vercel에서 개발한 Rust 기반 번들러로 Next.js 13에서 알파로 도입되었고, Next.js 16에서 stable이 되었다. 변경된 부분만 재빌드하는 증분
컴퓨팅 기법을 사용한다. Next.js와의 통합도가 높으며, 기존 Webpack 설정의 상당 부분을 마이그레이션할 수 있다. 하지만 Next.js 외의
환경에서는 사용이 제한적이다.
2. CRA의 현황과 Vite 선택해야 하는 이유
Create React App은 2023년 이후 공식 유지보수가 사실상 중단되었다. React 공식 문서에서 CRA는 더 이상 다루지 않으며, Vite나 Next.js
같은 대안을 제시한다.
2-1. Vite를 선택해야 하는 이유
프로젝트가 커질수록 차이가 더 크게 나며, 대규모 프로젝트에서는 로컬 서버 시작과 코드 수정 반영 속도가 체감상 5배 이상 빠르다. 하루에
수십 번 서버를 재시작하고 코드를 수정하는 개발 과정에서 실질적인 시간 절약으로 이어진다. 설정도 간단하며, CRA처럼 eject 없이도 자유로운
커스터마이징이 가능하다. 프로덕션 빌드도 Rollup 기반으로 최적화되어 번들 크기가 작다.
2-2. Vite 마이그레이션 핵심 3가지
vite.config.js 생성하여 플러그인과 경로 설정
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: { alias: { '@': '/src' } },
});
3. 결론
Webpack은 성숙한 생태계를 가졌지만 프로젝트가 커질수록 느려진다. Vite는 ESM 기반으로 빠른 개발 경험을 제공하며, CRA 유지보수
중단으로 사실상 표준이 되어가고 있다. Turbopack은 Next.js에서 안정화되었지만 범용성은 낮다. 기존 CRA 프로젝트는 Vite로 마이그레이션 시
개발 생산성이 크게 향상되며, 투자 대비 효과가 확실하다.
⭐발표자 : 이선우님