참고: https://ko.vite.dev/guide/why
webpack은 서버 시작시, 애플리케이션내 모든 소스코드를 크롤링 후 번들작업을 거친다음에 메모리에 올려 개발서버가 서빙된다.
하지만 Vite는 처음 cold start시에 esbuild를 이용해 디펜던시를 사전 번들링하고, 이후에 소스 코드를 ESM 형태로 브라우저에 전달합니다.
이로인해 cold start 이후 번들링과정이 제거되어 webpack대비 개발서버 실행 속도가 빠르고, 변경된 모듈만 리로드해 훨씬 효율적입니다.
앞서 말했듯이 모든 소스코드를 번들링해 전달하는것이 아닌, Native ESM을 이용해 브라우저의 형태에 맞게 소스코드를 전달합니다. 그 이후 import된 모듈만 가져와 로딩합니다.
→ 결론 번들링과정을 지우고 ESM 파일을 바로 브라우저로 전달. 번들링 과정 삭제로 빠른것!!
vite docs를 읽던 중 vite의 프로덕션 빌드 단계에선 esbuild대신 Rollup을 이용해 빌드를 한다고한다.
당연히 Golang으로 작성된 esbuild가 빠를것인데 왜 Rollup을 이용하는지 궁금해 찾아보았다.
다행히 vite docs에 적혀있었는데, Rollup의 플러그인 생태계와 esbuild의 빌드 속도를 트레이드 오프를 한것이었다.