Vite React + TS 환경 구축하기

사내 시스템 구축 중 리액트를 이용하여 3D 모델(glTF)을 활용하여 구축할 일이 초기에는 CRA(Create React App)을 이용하여 구성하다가 빌드 도구인 Vite를 발견하여 환경 구축을 정리하고자 한다.

Vite?

Vite는 “비-트”라고 읽으며 Dependencies(의존영역), Source code (소스영역)을 나누어 빠르게 빌드되게끔 문제를 해결했다고 한다.

*자세한 내용은 해당 URL을 참조. (https://vitejs-kr.github.io/guide/why.html#the-problems)

• Dependencies 영역
  • 기존 번들러는 JIT 컴파일 방식인 자바스크립트로 작성되어 있지만 Vite는 병렬처리에 유리한 Go언어로 작성된 Esbuild를 이용하여 빠른 번들링을 진행한다고 한다.
• Source code 영역
  • Non-plain JavaScript는 Native esm을 이용해 소스코드를 전달 (브라우저 이용)
  • HMR 방식(앱을 종료하지 않고 갱신된 파일만을 교체하는(Replacement) 방식)을 ESM을 이용
  • HTTP 헤더를 이용하여 캐시이용 하여 퍼포먼스 향상
• CRA와 Vite 성능 비교
  • React + TS 초기 빌드 속도
    • CRA : 2.4s
    • Vite : 0.54s
  • 특정 부분 수정시 로딩 속도
    • 따로 측정하진 않았지만 육안으로 압도적으로 Vite가 빨랐다.

⇒ 3D 모델을 이용하는 만큼 리소스의 크기는 커지고 빌드 속도는 차츰 느려질 것으로 판단하여 CRA보다 Vite를 사용하기로 결정하였다.

Vite + React + ts 세팅

세팅 방법은 정석적인 방법(프롬프트 설치법), 명령어 한 줄 방법, 커뮤니티 프로젝트 이용방법 총 3가지가 있다.

 

사전 준비

 Vite 설치

npm -g i vite

 

1. 정석적인 방법

 1.1 아래 명령어 수행 후 프롬프트를 따라간다.

##npm
npm create vite@latest
##yarn
yarn create vite

1.1. 프레임 워크 선택 (이동: 화살표, 선택 : 엔터)

1.2 TS 선택

1.3 완료

#실행
yarn dev

 

2. 한 번에 설치하는 방법

 yarn create vite {프로젝트명} --template react-ts

 

3. 커뮤니티 템플릿 이용하여 설치하는 방법

• 커뮤니티에서 운영되는 템플릿을 digit을 이용하여 설치할 수도 있다.

npx degit {유저이름}/{해당저장소} {내프로젝트이름}

• 예시
• 필자는 react, ts, tailwindcss를 적용할 것으로 해당 프로젝트가 적용된 “https://github.com/joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate” 저장소를 이용하였다.

npx degit joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate my-app

 

후기

   Vite의 빌드만 했는데도 속도 적인 측면에서 경험이 좋았고 이후 프로젝트를 진행하면서 따로 포스팅할 거리가 있다면 남기려고 한다.