Why Vite 간단 정리

vite의 핵심 기능

• 개발 서버
  • HMR (Hot Module Reload/Replacement) : 수정된 걸 새로고침 할 필요 없이 바로 적용시켜줌
• 번들링

특징

자바스크립트에 ESM이 나오기 이전(ES6 이전)에는 '번들링'을 통해서만 모듈화를 할 수 있었다.

그리고 그런 번들링 툴로 webpack, rollup, parcel 등이 등장했고 널리 쓰이고 있다.

JS로 만드는 앱의 크기가 커짐에 따라 번들링에 걸리는 시간도 늘어났고, dev 서버를 돌리거나 HMR을 사용해도 몇 초씩 기다려야하는 일들이 생겼음.

vite는 이제 브라우저가 native ESM을 지원한다는 사실과, 그동안 등장한 발전된 번들링 툴들(esbuild)을 적극 활용함

• 디펜던시(e.g. 리액트)들을 esbuild를 동해 pre-bundling 함
• 작성한 메인 코드들은 (번들링 하지 않고) native ESM으로 넘겨주므로 빠름
• HMR도 native ESM을 통해 이루어짐

프로덕션으로 내보낼 때 번들링을 해야 하는 이유

native ESM이 지원되긴 하지만, 번들링 하면 최적화를 할 수 있음.

tree-shaking, lazy loading 등등

rollup으로 번들링 하는 이유

rollup은 esbuild보다 느리지만, rollup의 플러그인 시스템의 유연함이 더 가치있다고 판단해서 사용함

정리

• 리액트 같은 외부에서 설치한 라이브러리(디펜던시)들 => Go 언어로 쓰여진 번들러인 esbuild로 미리 번들링해둠
• 작성한 코드들은 dev server, HMR에서 번들링 하지 않고 그대로 넘겨줌(native ESM) => 수정할 때마다 전체를 번들링하거나 할 필요가 없음
• 빌드로 번들링 할 땐 JS로 쓰여진 번들러인 rollup으로 번들링함 => esbuild보다 느리지만, 플러그인 시스템의 유연함이 더 가치 있어서 사용함

참고

• Why Vite (vitejs.dev)
• Getting Started (vitejs.dev)