[React] Vite를 사용해보자

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

참고자료

• vite 공식 페이지