React 개발 - Vite

Vite

• cf> CRA(Create React App)
• 빌드 속도, 새로운 코드 적용 시 반영 속도 (Feedback 속도) 개선
• Native ESM 기반. (서버를 먼저 시작하고, 서버 요청이 있을 때만 가져오면 됨)

원리

• 애플리케이션 모듈을 종속성과 소스코드로 나누어 개발 서버 시작 시간을 개선함.
• Dependencies: 개발 중 자주 변경되지 않는 일반 JS.
• Source Code: 변환이 필요한 코드 (JSX, CSS, Vue 등)
• 모든 소스 코드를 동시에 로드할 필요 X.

ESM (EcmaScript Module)

• ECMAScript 모듈(ESM)은 웹에서 모듈을 사용하기 위한 사양입니다.
• 모든 최신 브라우저와 권장하는 웹 모듈 코드 작성법에서 지원됩니다.

---

HMR (Hot Module Replace)

• 파일 편집 시 전체 번들을 빌드하지 않고, 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는 것.
• Vite에서 HMR은 기본 ESM을 통해ㅐ 수행됨.

---

Typescript Transpiling 속도

• CRA의 경우에는 어느정도의 세팅이 필요함.
• Vite는 기본적으로 세팅이 되어있고, TypeScript 사용을 지원함.
• esbuild를 이용하여 transpiling하므로 훨씬 빠른 속도.
• BUT> 타입 체크 기능은 없다. (에디터에서 제공하는 기능이므로 OK)

---

CRA vs. Vite

	Vite	CRA
설치 시간	30초	1분 40초
File Size	45MB	220MB
BuildFileSize	150KB	553KB

• 그렇다면, 무조건 Vite를 쓰는게 좋은지?
• 안정성 측면에 있어서는 CRA가 좋다.
• 상황에 맞게 판단해서 사용해보자!