cra(creatr react app)는 react 팀에서 추천하는 공식 보일러 플레이트이다.
리액트 설정이 간편하여 손쉽게 프로젝트 생성이 가능하여 많이 쓰이고 있다.

하지만 기술의 발전으로 cra도 어느새 구식이 되었고.. 새로 많이 쓰이는 vite에 대해 공부를 해보고자 한다.

Vite(비트)

는 Vue Framework 제작자인 Evan You가 만든 프론트엔드 툴이다.
webpack를 사용하는 cra와 다르게 Esbulid를 사용하는게 특징이다.

webpack? Esbulid??

webpack은 자바스크립트 코드로 구성된 번들링 도구이다. html 파일에 들어가는 모든 JS 파일을 하나의 JS 파일로 만들어 준다. 자바스크립트는 인터프리터 언어이기 때문에 속도가 느리다는 단점이 있다.

그래서 개발자들은 Go 언어를 활용한 새로운 툴을 만들어냈다. 바로 Esbulid.

webpack은 코드가 바뀌면 모든 자바스크립트 코드를 새로 번들링한다.
반면에 vite는 esbulid를 이용해서 변경된 부분만 새로 번들링하기 때문에 훨씬 빠르다.

개발 모드로 빌드를 할 때, Vite는 자바스크립트 모듈을 두 가지 카테고리로 나눕니다. 하나는 의존성 모듈, 다른 하나는 소스 코드.

의존성 모듈은 node_modules 폴더로부터 import 되는 자바스크립트 모듈이며 개발하는 동안엔 자주 바뀌지 않는 편입니다. 이 모듈은 esbuild를 사용하여 처리됩니다. Webpack이 브라우저의 요청 이전에 모든 자바스크립트 모듈을 처리하는 반면, Vite는 브라우저 요청 전에 의존성 모듈만 미리 번들링합니다.

소스코드는 .jsx, .vue, .scss와 같은 라이브러리 관련 확장자를 포함할 수도 있으며, 자주 수정되는 파일입니다. 또한 소스코드 전체는 동시에 로드될 필요가 없다는 특징이 있습니다.

vite는 기본으로 5173포트를 사용한다.
Vite에서는 절대 경로로 import 해야한다.

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