Vite

Vite

Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠르다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만 Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠르다. webpack, Parcel과 비교하면 10배 이상의 빠른 속도를 자랑한다.

또한 개발 서버를 이용할 때도 아주 빠르다. 기존 webpack과 같은 모듈 번들러를 이용할때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오래 걸렸다. 이와 같은 문제점을 Vite는 Native ESM이라는 브라우저의 자체적인 모듈 기능을 사용하여 해결했다. Vite가 실행하는 개발 서버는 브라우저가 요청하는 모듈을 전송해주고, 모듈 번들링 기능을 브라우저가 수행하기 때문에 개발 서버의 구동이 아주 빠르다.
(*번들링 : 모듈화된 소스코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업)

Vite를 이용해 리액트 프로젝트를 생성하는 방법

• ES6 언어를 사용하는 프로젝트 생성
  npm init vite [프로젝트명] -- --template react
  yarn init vite [프로젝트명] -- --template react
• 타입스크립트 언어를 사용하는 프로젝트 생성
  npm init vite [프로젝트명] -- --template react-ts
  yarn init vite [프로젝트명] -- --template react-ts