Vite
Vite(비트)는 차세대 프론트엔드 개발 툴로, 빠른 개발 환경과 간단한 번들링 환경을 제공하기 위해 만들어진 초고속 빌드 도구(Build Tool)입니다.
React, Vue, Svelte 등 대부분의 프레임워크에서 널리 사용됩니다.
기존 번들러 기반 도구의 문제점
기존 번들러(Webpack)는 개발 서버를 실행할 때 전체 프로젝트를 번들링해야하기 때문에 여러 문제가 발생합니다.
- 개발 서버 실행이 느림
- 코드 수정 후 HMR(Hot Module Replacement)이 느림
- 프로젝트가 커질수록 빌드 시간이 기하급수적으로 증가
- JS 모듈을 무조건 번들링해야 하는 구조
이러한 문제를 해결하기 위해 등장한 것이 Vite
Vite의 핵심 1 : 번들이 필요 없는 개발 서버 (ESM 기반 Dev Server)
Vite는 ESM(ES Modules)을 활용해서 모듈을 직접 요청하니, 별도 번들 없이도 동작할 수 있습니다.
ESM(ES Modules) : 브라우저가 직접 모듈을 불러올 수 있게 해주는 자바스크립트의 공식 모듈 체계
- 서버 기동 속도는 거의 즉시
- 수정된 파일만 다시 로드
- HMR 반응 속도 극대화
Vite의 핵심 2 : 빌드 단계에서는 Rollup 사용
개발 단계에서는 번들링을 하지 않지만, 프로덕션 빌드에서는 Rollup을 사용해 최적화된 번들을 생성합니다.
Rollup은 Tree-shaking 성능이 좋고 ES Module 최적화에 강해서, 최종 산출물이 매우 가볍고 빠르다.
트리 쉐이킹(Tree Shaking) : 사용되지 않는 코드를 자동으로 제거하여 번들 크기를 줄이는 기술
즉,
- 개발 : Native ESM + esbuild
- 빌드 : Rollup
이중 구조가 Vite의 핵심
Vite의 장점
- 서버 실행 속도
- 초고속 HMR (Hot Module Replacement)
- 단순한 설정 (vite.config.ts)
- 프레임워크 독립성
- Plugin 기반 확장성
CRA vs Vite
| 기능 | CRA | Vite |
|---|---|---|
| 개발 서버 속도 | 느림 | 매우 빠름 |
| HMR 반응성 | 보통 | 빠름 |
| 설정 난이도 | 복잡 (숨겨진 Webpack) | 매우 간단 |
| 빌드 속도 | 느림 | 빠름 |
| 생태계 | 안정적이지만 정체 | 폭발적 성장 |
| 유지보수 | 사실상 중단 | 활발한 업데이트 |
추가 내용
@vitejs/plugin-react-swc
Vite에서 React 프로젝트를 초고속으로 개발할 수 있게 해주는 공식 플러그인입니다.
- React 코드(Babel 변환 필요)를 SWC(Speedy Web Compiler)로 트랜스파일링
- JSX, TSX, 최신 JavaScript 문법을 브라우저가 이해할 수 있는 코드로 변환
- HMR(Hot Module Replacement) 지원
즉, React + TypeScript + 최신 JS 문법을 Vite 환경에서 빠르게 실행할 수 있게 해주는 플러그인입니다.