Vite(발음: /vit/)는 프런트엔드 개발을 위한 빠른 빌드 도구이자 개발 서버이다. 2020년 4월, Vue.js 프레임워크의 창시자 Evan You에 의해 처음 공개되었다. Vite는 기존의 번들러가 제공하던 전체 파일 번들링 방식을 탈피하여, 브라우저가 네이티브 ES 모듈을 직접 로드할 수 있는 환경을 활용한다. 이를 통해 개발 단계에서는 파일을 즉시 제공하고, 프로덕션 빌드 단계에서는 Rollup을 기반으로 최적화된 번들을 생성한다.
주요 특징
- 즉각적인 모듈 로딩
- 개발 서버가 파일 요청 시 해당 모듈을 즉시 변환·전송하므로, 페이지 새로 고침 시 전체 번들을 재구축할 필요가 없다.
- 핫 모듈 교체(HMR)
- 코드 변경 시 전체 페이지를 리로드하지 않고, 변경된 모듈만 교체해 개발 효율성을 높인다.
- 플러그인 시스템
- Vite는 Rollup 플러그인을 그대로 사용할 수 있으며, 자체 플러그인 API를 제공한다.
- 다양한 프레임워크 지원
- 기본적으로 Vue·React·Svelte·Preact 등 주요 프론트엔드 프레임워크와 호환된다.
- 프로덕션 빌드
vite build명령은 Rollup 기반으로 최적화된 정적 파일을 생성한다.
사용 맥락
- 신규 프로젝트 시작: Vite는
npm create vite@latest명령을 통해 템플릿 기반 프로젝트를 손쉽게 초기화한다. - 기존 프로젝트 마이그레이션: Webpack·Parcel·Snowpack 등 기존 번들러를 사용하던 프로젝트를 Vite로 전환하여 개발 속도와 빌드 효율을 개선할 수 있다.
- 라이브러리·컴포넌트 개발: 빠른 피드백 루프와 경량 번들링이 요구되는 UI 라이브러리 및 재사용 가능한 컴포넌트 제작에 적합하다.
기술 스택 및 호환성
- Node.js: 최소 Node.js 14버전 이상을 요구한다.
- ESM 기반: 최신 브라우저의 ES 모듈 지원을 전제로 설계되었으며, 구형 브라우저 지원을 위해 별도 폴리필이나 번들링 옵션을 제공한다.
- 타입스크립트: 기본적으로 타입스크립트 파일을 인식하고 변환한다.
역사 및 배경
- 2020년 4월: Vite 1.0 정식 출시. 초기 목표는 Vue.js 개발 환경의 속도를 획기적으로 개선하는 것이었다.
- 2021년 6월: Vite 2.0 릴리즈. React·Svelte·Lit 등 다중 프레임워크 지원을 확대하고, 플러그인 API를 정립하였다.
- 2022년 이후: 정기적인 업데이트를 통해 성능 최적화, 새로운 빌드 옵션, 그리고 서버 사이드 렌더링(SSR) 지원 등을 추가하였다.
참고 사항
- Vite는 오픈 소스 프로젝트이며, GitHub 저장소(https://github.com/vitejs/vite)에서 소스 코드와 문서를 확인할 수 있다.
- 공식 문서는 다국어 지원을 제공하지만, 주요 내용은 영어로 작성되어 있다.
위 내용은 공개된 공식 자료와 주요 기술 블로그 등을 기반으로 한 객관적인 서술이다.
