Vite

애플리케이션의 모듈을 dependencies와 source code 두 가지 카테고리로 나누어, 개발 서버의 시작 시간을 개선한다.

Dependencies

• 개발 시 내용이 바뀌지 않을 일반적인 (Plain) JS 소스코드.
• 기존 번들러로는, 컴포넌트 라이브러리와 같이 몇 백개의 JS 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었고, 많은 시간을 필요로 했다.
• Vite 의 사전 번들링은 EsBuild를 사용한다.

Source code

• JSX, CSS 또는 Vue/Svelt 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-Plain JS 소스코드
• Vite 는 ESM (자바스크립트 네이티브 모듈)을 이용해 소스코드를 제공한다.
• 즉, 브라우저가 번들러 작업의 일부를 차지 할 수 있도록 합니다.
  • 왜? ESM (자바스크립트 네이티브 모듈) 은 브라우저에서 ES 모듈을 직접 불러올 수 있게 해주는 기능.
  • 즉, Vite 는 개발모드에서 Native ESM 기반으로 동작하므로, 어떤 모듈이 수정되면 브라우저는 Vite 로부터 HTTP 요청을 보내 수정된 모듈만 받아 교체한다.
  • 이 때 디펜던시 패키지는 캐시에서 가져오므로 HMR 속도가 빨라진다.
  • 다른 번들러에서도 HMR 을 제공하지만, Vite 는 전 과정에서 ESM 을 활용하므로 추가적인 번들링 프로세스가 필요 없다.
• 즉, 브라우저가 요청하는 대로 소스 코드를 변환하고 제공한다.