<aside> 💡 vite는 프랑스어로 ‘빠르다’를 의미하며 발음은 ‘/vit/(비트)’라고 한다.

</aside>

왜 CRA 말고 vite-react 를 사용했는가

• 빠른 번들링 속도!
  • Vite의 번들링은 Go로 작성된 Esbuild를 사용하며, 이는 Webpack, Parcel과 같은 기존 번들러 대비 10-100배 빠른 번들링 속도를 보여준다.
• 빠른 소스 코드 갱신
  • 기존에는 소스 코드를 업데이트하려면 번들링 과정을 다시 거쳐야 해서 프로젝트가 커질수록 갱신 속도 또한 오래 걸렸다. 일부 번들러는 변경된 파일마 새로 번들링하게끔 했으나, 처음에는 모두 번들링을 해야하는건 마찬가지.
  • Vite는 Native ESM(esmodule)을 이용하여 브라우저를 번들러로 사용한다. 브라우저가 특정 모듈 수정에 대한 소스 코드를 요청하면 vite는 수정된 코드를 전달하기만 하면 되므로 속도가 빠르다.
  • 하지만 Esbuild는 아직 code-splitting 및 css에 관련된 처리가 미비하여 배포시에는 사용되지 않아 미리 설정된 vite 빌드커맨드를 사용해야한다(음..자세한 사항은 vite홈페이지 참고)

세팅

• npm

# 설치
$ npm init vite@latest vite_react_tutorial -- --template react

# 그 뒤로 하라는대로 하면 세팅 끝..! 엄청 빠르다
$ cd vite_react_tutorial
$ npm install
$ npm run dev

끝

참고

시작하기 | Vite