Vite

https://vitejs.dev/guide/why.html

 

문제점

프로젝트가 커지면서 JavaScript 기반의 도구는 성능 병목 현상이 발생. 개발 서버를 동작시키는데 시간이 오래 걸렸다.

개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야만 실제 페이지를 제공할 수 있었다.

vite의 해결책

몇몇 라이브러리는 몇 백개의 JS 모듈을 가지는 매우 큰 디펜던시에 대한 번들링 과정이 필요했다. vite는 이를 esbuild로 사전 번들링한다. Go로 작성된 esbuild는 기존 번들러(webpack, parcel)에 비해 10-100배 빠르다.

vite는 JSX, CSS Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정이 매우 잦은 non-plain js코드를 Native ESM을 이용해 소스코드를 제공. 즉, 브라우저가 곧 번들러. 브라우저의 판단아래 특정 모듈에 대한 소스코드를 요청하면 그 모듈만 전달. 조건부 동적 import 이후 코드는 실제 화면에서 사용 되어야만 처리된다.

번들링

esbuild가 굉장히 빠르게 번들링이 가능하나 코드 분할 및 CSS관련된 처리가 아직 미비하여 우선은 Rollup을 사용하고 있고 추후 esbuild가 좀 더 검증되고 유연한 처리가 가능해지면 그때 사용을 논의할 예정.