VITE 란?

 

아래는 바이트 공식 홈페이지에 가면 볼 수 있는 vite의 장점들이다. 바이트란 무엇일까?

https://vitejs.dev/

 

이전까지 npx create-react-app을  통해서 리액트 앱을 만들었는데 ,  vite는 이를 대신해서 사용할 수 있는 것이다.
물론 리액트 뿐만 아니라 뷰 같은 다른 프로젝트도 생성이 가능하다.

그렇다면 왜 바이트를 사용할까?

공식 문서내용은 아래와 같고 요약하자면
기존에 ES모듈(import)이 사용하술 있기 전에는 번들링을 통해서 , 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결했다. 그런데 이러한 방식이  점점 자바스크립트 코드가 많아지면서 병목현상이 생겼다. 그 당시엔 좋았떤 것이 점차 속더 및 성능 저하가 생긴 것이다.

 

이를 ES모듈을 적용하여서 속도 및 성능을 개선한 게  바이트다.

 

바이트는 느린 서버시작과 업데이트를 개선함

 

서버시작 개선방법 

Depencies 부분 

자바스크립트는 ES번들을 사용하여 종속성을 사전 번들로 제공하고, ES번들은 GO로 작성되었는데 이는 자바스크립트 기반 번들보다 10~100이상 속도가 빠르다.

 

Sourcecode 부분

Native ESM을 통해서 소스코드 제공 + 브라우저가 일부 번들링 작업을 인계받고, 브라우저가 요청시에만 제공

 

서버업데이트 개선방법 

기존 번들러 기반 빌드 설정에서는 파일 편집 시 전체 번들을 다시 빌드하는 경우가 있는데 , vite가 사용하는
HMR방식은 페이지의 나머지 부분에 영향을 주지않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 함

또한 ESM을 통해서 실행하여서 기존 HMR방식과는 다르게 앱의 크기에도 덜 영향을 받는다.

 

소스코드를 작성하여 변경하더라도 state가 초기화 되지않음.

설치방법

npm init vite
(처음 사용하는 경우 y를 누르면  create vite가 설치됨)

이후 원하는 프로젝트 (react ) -> typescript를 선택한 후
npm install로 모듈 설치
이후 npm run dev로 실행 (npm start 대신 사용)

패캠 강사님이 비교한 것에 의하면
                          바이트      vs        CRA              의 차이는 
설치 시간               30초                  1분40초
FIle Size                45MB                  221MB
Build File Size       150KB                553KB