최근 수정 시각 : 2025-07-21 20:57:51

Vite

{{{#!wiki style="margin: -10px -10px"<tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023> 파일:Vite_logo.svgVite
}}}
<colbgcolor=#ffffff,#1c1d1f><colcolor=#000,#fff> 라이선스 MIT 라이선스
분류 웹 프론트엔드 개발 툴
플랫폼 데스크톱
Microsoft Windows, Linux, macOS
파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg파일:GitHub 아이콘 화이트.svg 파일:디스코드 아이콘.svg 파일:Bluesky 아이콘.svg 파일:마스토돈(SNS) 아이콘.svg
1. 개요2. Rolldown3. 관련 문서

1. 개요


Vue.js, React, Svelte, SolidJS 등을 지원하는 빌드 도구이다. '바이트'가 아닌 '비트'[1]로 읽는다.

Vue 3와 함께 개발된 툴로서, 기존 Vue CLI의 위치를 대체한다. 내부적으로 Rollup[2] 번들링과 esbuild[3]의 빌드 시스템을 조합하여 미친 듯이 빠른 HMR(Hot Module Replacement, 새로고침 없이도 코드 변경사항을 반영시켜 주는 기술) 속도를 보여준다. 브라우저와 코드 에디터 화면을 동시에 띄워 놓은 다음 코드 저장 키를 누르는 순간 즉시 화면이 바뀌는 모습은 아름다운 수준이다.

내부적으로 SSR 시스템도 갖추고 있다.[4] Vue.js 지원을 베이스로 시작했지만, 규모가 커지고 발전하다보니 다른 프레임워크들에서도 눈독들일 만한 강력한 툴이 되어서 현재는 다양한 프레임워크들과의 연동 시스템이 존재한다. Rollup을 채택했기 때문에 일부 빌드 기반을 제외하면 대부분의 Rollup 플러그인과 호환된다.

electron-vite라고 하는 빌드 툴로 일렉트론 앱을 만들 수 있다.

2. Rolldown

홈페이지

webpack 개발진이 다시 모여 정신적 후속이면서 Rust 기반의 트랜스파일러 및 번들러 솔루션인 Turbopack을 만들듯이, Vite 팀도 Svelte와 Rollup.js를 만든 Rich Harris와 협업하여 Rollup.js 및 esbuild의 호환성을 최대한 확보하면서도 강력하고 빠른 Rust 기반의 트랜스파일러 및 번들러인 Rolldown을 개발 중에 있다.

개발이 완료되면 Vite의 빌드 및 번들링 도구는 Rolldown으로 변경되며, 트랜스파일러와 코드 품질 도구를 Oxc를 통해 해결하게 된다. Turbopack과 차별화되는 특징은, webpack의 기능이 너무 방대하여 필요한 만큼 챙겨가는 Turbopack[5]과는 달리, Rolldown은 Rollup 번들러의 최대한 많은 옵션을 호환시켜 Rolldown 백엔드의 Vite 사용 시 최소한의 마이그레이션으로도 최대한의 효과를 보겠다는 목표를 가지고 있다.

3. 관련 문서


[1] 프랑스어로 '빨리'라는 의미이다.[2] Svelte 로 유명한 Rich Harris가 만든 번들링 도구이다.[3] Go로 만들었기 때문에 Webpack 등의 기존 도구들보다 빠른 속도를 자랑한다.[4] 4.0부터 SSR 부문에 많은 개선이 이루어져, 이를 사용하는 SvelteKitAstro가 많은 발전을 이루었으나, 정작 본진의 풀 스택 프레임워크인 Nuxt.js가 다른 경쟁 프레임워크보다 다소 늦게 출시 후 안정화 되었다.[5] 같은 웹팩의 정신적 후신으로 웹팩의 최대한의 호환성을 보장한다는 Rspack 도 있다.