| {{{#!wiki style="margin: -10px -10px" |
<tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023> |
Vite |
}}} | |
| <colbgcolor=#fff,#1f2023><colcolor=#000,#fff> 라이선스 | MIT 라이선스 | |||
| 분류 | 프론트엔드 개발 툴 | |||
| 플랫폼 |
데스크톱 Microsoft Windows | Linux | macOS |
|||
|
|
||||
[clearfix]
npm create vite@latest
1. 개요
Vue.js, React, Svelte, SolidJS 등을 지원하는 빌드 도구이다.
Vue 3와 함께 개발된 툴로서, 기존 Vue CLI의 위치를 대체한다. 내부적으로 Rollup 번들링과 ESBuild[1]의 빌드 시스템을 조합하여 미친 듯이 빠른 HMR(Hot Module Replacement, 새로고침 없이도 코드 변경사항을 반영시켜 주는 기술) 속도를 보여준다. 브라우저와 코드 에디터 화면을 동시에 띄워 놓은 다음 코드 저장 키를 누르는 순간 즉시 화면이 바뀌는 모습은 아름다운 수준이다. 내부적으로 SSR 시스템도 갖추고 있다.[2] Vue.js 지원을 베이스로 시작했지만, 규모가 커지고 발전하다보니 다른 프레임워크들에서도 눈독들일 만한 강력한 툴이 되어서 현재는 다양한 프레임워크들과의 연동 시스템이 존재한다. Rollup을 채택했기 때문에 당연히 기존 Rollup 플러그인과 호환된다.
electron-vite라고 하는 빌드 툴로 일렉트론 앱을 만들 수 있다.
2. Rolldown
홈페이지webpack 개발진이 다시 모여 정신적 후속이면서 Rust 기반의 트랜스파일러 및 번들러 솔루션인 Turbopack 을 만들듯이, Vite 팀도 현재 Rollup.js 와 esbuild 의 호환성을 최대한 챙기면서 강력하고 빠른 Rust 기반의 트랜스파일러 및 번들러인 Rolldown 을 개발 중에 있다.
개발이 완료되면 Vite 의 백엔드는 이 Rolldown 이 되며, 트랜스파일러와 번들러를 모두 여기서 해결하게 된다. Turbopack 과 차별화되는 특징은, webpack 의 기능이 너무 방대하여 필요한 만큼 챙겨가는 Turbopack 과는 달리, Rolldown 은 Rollup 번들러의 최대한 많은 옵션을 호환시켜 Rolldown 백엔드의 Vite 사용 시 최소한의 마이그레이션으로도 최대한의 효과를 보겠다는 목표를 가지고 있다.
[1]
Go로 만들었기 때문에 Webpack 등의 기존 도구들보다 빠른 속도를 자랑한다. 그리고 Webpack 팀이 이 속도에 대응하기 위해 Rust 기반인 Turbopack 을 개발하고 있다.
[2]
4.0부터 SSR 부문에 많은 개선이 이루어져, 이를 사용하는
SvelteKit 및
Astro가 많은 발전을 이루었으나, 정작 본진의 풀 스택 프레임워크인
Nuxt.js가 다른 경쟁 프레임워크보다 다소 늦게 출시 후 안정화 되었다.