[Node.js] Vite

vite는 node.js 환경의 주요 보조도구 중 하나다. Vue 개발자로 유명한 에반유가 만들었다.
그래서 좀 찝찝하긴 한데... Vue 외에도 다 사용은 할 수 있는 범용 도구다.

포지션이나 용도는 대충 웹팩과 비슷하다고 보면 된다. 번들링, dev 서버 띄우기 등의 기능을 제공한다.
개발모드로 돌릴때 로드가 매우 빠르다는 장점이 있다.

프로젝트 생성하기

npm create 명령을 통해 손쉽게 프로젝트를 구성할 수 있다.

npm create vite@latest

그러면 무슨 포맷으로 생성할지 물어본다. 대중적인건 대충 넣어놨다.
나는 국밥 리액트로 골랐다.

그러면 언어와 툴체인까지 골라서 생성을 할 수 있다.

그럼 이런 형태로 생성이 된다.

프로젝트 실행해보기

package.json을 보면

이러한 형태로 사용을 하는 것을 볼 수 있다.
vite로 개발서버를 띄우고, vite build로 빌드를 수행한다.
타입스크립트 컴파일 자체는 별도로 해줘야 하고, vite는 자바스크립트 수준의 빌드만 제공하는 것 같다.

vite 설정파일이다. 추가 설정이 필요하면 여기에 더하면 된다.

npm run dev 등의 명령으로 실행하면

빠르게 잘 뜰 것이다.

근데 정말 체감 부팅속도가 정말 빠르긴 하다. 웹팩보다 기본 수십배 정도는 빠른 것 같다.

참조
https://vitejs.dev/guide/