[Vite] CRA vs Vite

Vite

프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구

• 네이티브 ES Module을 넘어 다양한 기능을 제공한다.
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 최적화된 정적 리소스들을 배포할 수 있고, 미리 정의된 설정을 제공한다.

CRA vs Vite

1. CRA는 webpack으로 번들링해서 코드가 바뀌면 모든 자바스크립트 코드를 새로 번들링한다.

→ 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다.

Vite는 esbuild를 이용해서 변경된 부분만 새로 번들링한다.

→ Vite도 첫 번째 실행해서 전체를 한번 번들링하고 그 이후로는 변경된 부분만 새로 번들링

 

2. webpack은 Nodejs로 만들어졌고, esbuild는 Go로 만든 프로그램이다. 

 

3. CRA는 개발 서버로 express 서버를 돌리고, Vite는 Koa라는 작은 서버를 돌린다.

→ 리소스 차이가 난다.

 

4. Vite 코드의 시작점은 src 폴더의 main.tsx 파일이다.

• index.html > main.tsx 파일로 연계된다.

 

5. Vite는 절대 경로로 import 해야한다.

• CRA → import Cards from "components/cards";
• Vite → import Cards from “/src/components/cards.jsx”

⇒ 해결할 수 있는 플러그인 있지만, 그냥 절대 경로 import 하는 습관 들이는 것을 추천

 

6. React 환경변수 선언 방식 : REACT_APP_ 방식이 아닌 VITE_ 방식을 사용

• CRA → REACT_APP_ API_KEY = 1234567890..
• Vite → VITE_API_KEY = 1234567890..

⇒ vite 플러그인 중에 vite-plugin-env-compatible 패키지를 쓰면 CRA 방식으로도 해결됨

 

참고

https://mycodings.fly.dev/blog/2022-11-19-using-vite-rather-than-create-react-app-cra