🎿 Vite
Vite는 원래 Veu 환경에서 빌드를 도와주는 툴이었지만, 지금은 범용으로 사용된다.
Vite는 프랑스어로 빠르다는 의미를 가지고 있으며, 빠른 dev서버 시작과 빠른 모듈 교체를 내세운다.
빠름에 비결은 보통 우리가 빌드시 다양한 파일을 한번에 묶어서 빌드를 하는 번들링 기술을 사용하는데, Vite는 ESM(자바스크립트 네이티브 모듈)을 사용하기 때문이다.
🎁 ESM
ESM은 ES6 부터 추가된 자바스크립트 모듈 시스템이다.
<script type="module" src="index.mjs">의 형태로 브라우저에서도 모듈 시스템을 사용 할 수 있게 한다.
ESM을 통해 번들링 작업 부하를 브라우저로 넘긴다.
추가로 콜드-스타트(처음 실행되 이전에 캐싱한 데이터가 없는 경우) 방식으로 개발 서버가 구동되면, 기존 번들링 기반에서는 모든 소스코드를 빌드하고 나서야 실제 페이지를 제공 할 수 있었다.
Vite는 dependencies, source code 두가지 카테고리로 나누어 개발 서버를 시작함으로써 해결했다.
- Dpendencies: 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드
- Source Code: 컴파일링이 필요하고 수정이 빈번히 일어나는 소스코드
Vite는 ESM 방식을 쓰기에 브라우저가 번들러 역할을 하며, 브라우저 판단하에 특정 모듈에 대한 소스코드를 요청시 이를 전달함으로써 페이지 제공을 빠르게 함
Vite에서 제공되는 npm 스크립트는 다음과 같다
{
"scripts": {
"dev": "vite", // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
"build": "vite build", // 배포용 빌드 작업을 수행합니다.
"preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
}
}
달콤살벌