- vite는 ESModule(esbuild)를 그대로 쓰기때문에, 미리 bundle을 만들어놓기 때문에, 번들링을 따로 하지 않아서 속도가 훨신 빠르다.
→ 수정,적용을 하면 dev환경에 반영이 빠름.
Vite는 브라우저에서의 네이티브 ES 모듈 활용과 compile-to-native 언어로 작성된 자바스크립트 툴이라는 새로운 발전을 통해 더 나은 개발자 경험을 제공합니다. esbuild는 go언어(low-level언어)로 작성됨
- 롤업기반의 2세대 번들링툴
- 최초에는 vue프로젝트에만 사용되었으나, 지금은 react프로젝트와 같은 프로젝트에도 적용 가능하게 확대 되었다.
- HMR(Hot Module Replacement)
Vite는 네이티브 ESM을 기반으로 HMR을 구현하므로 다른 번들링 툴보다 우위에 있다고 할 수 있습니다.
모듈이 수정되면,
Vite는 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐입니다. 이는 어플리케이션의 크기와 관계 없이 HMR을 언제든 빠르게 이뤄지도록 하죠.
npm init @vite/latest yarn create vite
네 줄 요약
Vite는 번들링을 생략하여 개발 서버를 빠르게 구동시킨다.
Vite는 더 빠른 리로딩과 캐싱을 위해 HTTP 상태 코드를 활용한다.
Vite는 HMR을 위해 native ESM을 사용한다. 따라서 앱에 대한 변경사항이 빠르게 반영된다.
Vite가 설정한 최소한의 config로도 사용할 수 있다.
“vite는 빌드가 빠르고, HMR이 업데이트 되는 부분만 적용되기 때문에 프로젝트가 커지면 커질수록 더 빠르다.”
내생각
하지만, vue프로젝트 전용으로 개발되었기 때문에, 리액트를 개발하는 입장에서, 혹시나 알 수 없는 에러가 생기지 않을까 걱정이 되지만, 대규모 서비스를 개발 할 때 좋을 것 같다.
