[Vite] Vite란

Vite(프랑스어로 "빠른", 발음: /vit/)는 Module Bundling, DevServer, HMR 등의 기능을 지원하는 프론트엔드 개발자를 위한 Tools 입니다.

Vite를 사용해야하는 이유

1. 번들링(Bundling)

.js, .html, .vue, .jsx 등 여러 종류의 파일로 이루어신 소스를 브라우저에서 실행할 수 있도록 하나로 모아주는 Bundling 기능을 제공합니다.

 

2. 개발 서버 구동속도 향상

이전 번들링 기반 개발서버 구동 방식에는 모든 소스코드의 크롤링 및 빌드작업이 완료되어야 페이지 접속이 가능했습니다. 소스내에 포함된 Require 모듈들의 번들링 완료 후 서버가 구동되었던 방식에서 Native ESM(ES Modules) 기반 개발 서버 구동방식으로 브라우저 실행 후 필요한 페이지에서만 동적 Import 방식으로 기능을 제공합니다.

 

Vite는 Dependencies와 Source code를 구분합니다. 처음 Vite를 실행할 때 해당 프로젝트의 Dependencies를 사전에 번들링 합니다. 사전 번들링은 Go 언어로 작성된 esbuild가 수행하는데 Webpack, Parcel과 같은 기존 번들러 대비 10~100배 빠른 속도를 제공합니다.

3. 소스코드 Update

소스 코드를 업데이트 할 때 다시 번들링하는 과정을 없에고 HMR(Hot Module Replacement) 기능을 지원하여 수정된 부분만 업데이트하여 개발 속도를 향상 시키고 전 과정을 ESM 방식를 이용하기에 소스코드의 사이즈에 영향을 받지 않습니다. 

*HMR 기능을 제공하는 Vite 이외 기타 Tools에도 활용할 수도 있지만 프로젝트가 커짐에 따라 지연시간이 증가하는 문제가 있습니다. 하지만 Vite에서는 Native ESM을 활용해 프로젝트 사이즈에 영향을 받지 않습니다.

 

localhost에서 개발 서버 실행 중 코드 수정 후 저장 할 때 아래와 같이 hmr update log를 확인할 수 있습니다.

 

4. Production Build (Rollup사용)

현재 Vite의 Production Build에서는 esbuild 대신 Rollup을 사용하고 있습니다. 속도는 esbuild가 빠르지만 현재까지는 Rollup의 유연한 플러그인 API, 다양한 인프라로 인해 사용하고 있지만 추후 esbuild로 변경될 가능성이 있다고 합니다. 

 

 

참고사이트
https://ko.vitejs.dev/guide/why.html