✏️ Vite 세팅과 설치

Vite가 뭔가요?

`Vite`는 프론트엔드 개발을 위한 툴이다. `비트`라는 발음에 가깝다.

바이트 아님!!  🤣

 

Vite는 두가지 역할을 한다

- Dev server : 개발 환경에서 HMR과 같은 기능을 제공한다.

- Build : 프로덕션 배포를 위한 소스코드 번들링 기능

 

 

 

Vite를 쓰는 이유

Javascript 애플리케이션이 점점 더 발전함에 따라 처리해야하는 모듈의 개수도 증가하고 있고, 

이러한 상황에서는 성능 병목 현상이 발생되고 개발 서버를 가동하는데 오랜시간을 기다려야한다.

그런 초점에 맞춰 서버 구동이 좀더 빠르게 만들어주고 HMR을 사용하더라도 변경된 파일이 적용될 때 까지 시간소요가 길었다.

하지만 Vite에서는 사전 번들링 기능은 EsBuild를 사용하고 있고 Native ESM을 이용하여 소스코드를 제공한다.

 

기존의 번들러 기반으로 개발을 진행할 때, 소스 코드를 업데이트 하게 되면 번들링 과정을 다시 거쳐야 했다.

따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 됩니다.

어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체하고,

브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달해준다.

 

전 과정에서 완벽하게 ESM을 이용하기에, 앱 사이즈가 커져도 HMR을 포함한 갱신 시간에는 영향을 끼치지 않는다.

또한 vite는 HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높인다.

 

요약하면, Vite는 빠른 개발 경험과 최적화된 번들링을 제공하는 Vue.js 및 기타 프레임워크용 웹 개발 도구임.

 

 

 

 

 

공식문서를 보면 더 쉽게 이해할 수 있다.

 

 

 

---

 

 

 

설치하기

npm create vite@latest
//또는
yarn create vite

 

설치하고 프롬프트 창에 출력된 메시지를 따라 내 환경에 맞게 설치해주면 된다.

설치하고 node_modules를 깔아주기 위해 `yarn install`을 해준다 `yarn`으로 생략 가능하다.

 

 

실행

yarn dev

 

 

 

Docs

Vite