Vite는 빠른 프론트엔드 개발 환경을 제공하는 빌드 도구이자 개발 서버이다.
Vue.js의 제작자인 에반 유 가 만들었으며, 기존 번들러의 성능 문제를 해결하기 위해 개발되었다.
Vite(프랑스어로 빠르다는 의미)는 최신 웹 프로젝트에 더 빠르고 효율적인 개발 환경을 제공하는 것을 목표로 하는 빌드 도구이다.
두 가지 컨셉을 중심으로 하고 있다.(Vite공식 문서)
기존 번들러의 문제
느린 초기 서버 시작(Cold Start)
Cold Start 최초로 실행되어 이전 캐싱 데이터가 없는 경우
기존 번들러는 개발 서버를 실행할 때, 모든 파일을 한번에 번들링 한 후 서버를 실행함.
프로젝트 규모가 커질수록 번들링 시간이 증가하여 개발 서버 실행이 늦어지게 됨.
특히 webpack은 트리 셰이킹, 코드 스플리팅 등의 최적화를 수행하기 때문에 초기 로딩속도가 더 느려지게 됨
느린 HMR
기존 번들러는 코드가 수정되면 전체 번들을 다시 생성해야 하기 때문에 HMR이 상대적으로 느리다.
프로젝트가 커질수록 HMR의 성능이 나빠지고, 변경사항이 바로 반영되지 않아 개발속도가 저하됨.
개발환경에서의 오버헤드
Webpack등 기존 번들러는 모든 파일을 하나의 번들로 묶기 때문에 개발 중에도 번들링 과정이 필요하다.
Vite의 장점
보다 빠른 HMR
Vite는 개발 서버를 실행 할 때 ES Module(ESM) 기반으로 동작하여, 기존 번들러 방식 보다 빠르게 애플리케이션을 실행한다.
HMR이 기본으로 지원되며, 기존 번들러와 달리 변경이 일어난 부분만 반영된다.
빠른 개발 서버
vite는 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선한다.
Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드.
기존 번들러로는 컴포넌트 라이브러리와 같이 몇 백 개의 JavaScript 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었고 많은 시간을 필요로 했다.
Source code: JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드.
vite는 Native ESM을 이용해 소스 코드를 제공한다. 이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 한다. Vite는 브라우저가 요청하는 시점에만 코드 변환을 수행하여, 한 번에 모든 파일을 처리하지 않고 필요한 코드만 즉시 제공하고, 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용되는 경우에만 처리된다.
사전 번들링
Vite는 외부 라이브러리를 한 번만 번들링하여 node_modules/.vite 디렉터리에 캐싱함.
이후 개발 서버가 시작될 때, 번들링된 파일만 가져와 빠르게 로딩할 수 있음.
Vite는 개발 시 내용이 바뀌지 않을 코드들을(Dependencies) 사전번들링을 사용하여 시간을 단축한다. 사전 번들링에 Esbuild를 사용하며, Go언어로 작성되어 JS 기반의 Webpack, Parcel보다 훨씬 빠르게 변환할 수 있음.
참고
