Vite란?
공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
Create React App대신 사용하는 이유
CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있습니다.
위와 같은 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 됩니다.
*Esbuild: Go 언어로 작성된 JavaScript 빌드툴로 속도가 빠르다.
지원중인 템플릿
- vanilla
- vue
- react
- preact
- lit
- svelte
Vite 설치하기
아래와 같은 명령어를 입력하여 설치할 수 있습니다.
Vite를 사용하기 위해서는 14.18+, 16+의 Node.js를 요구하며 템플릿에 따라 더 높은 버전의 Node.js를 요구할 수 있습니다.
npm create vite@latest
yarn create vite
템플릿 생성하기
React로 작성을 할 것이기 때문에 템플릿 명으로 react를 작성하면 됩니다.
TypeScript의 경우 템플릿-ts를 붙여작성하게 됩니다.
# npm 6.x
npm create vite@latest ${디렉터리 명} --template ${템플릿 명}
# npm 7+
npm create vite@latest ${디렉터리 명} -- --template ${템플릿 명}
# JavaScript react 템플릿 생성
npm create vite@latest vite-test -- --template react
# TypeScript react-ts 템플릿 생성
npm create vite@latest vite-test -- --template react-ts
Vite 실행
npm run dev
참고자료
Frontend Developer