[Vue3] Vite란? 무엇이며, 사용해야하는 이유

1. Vite란?

• 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.
• 첫 번째, 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement(HMR)
• 두 번째, 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용하여 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
• vanilla, reat, vue 등에서 사용 가능

 

2. 기존 번들러 기반 도구의 문제점

• JavaScript 기반의 도구는 성능 병목 현상이 발생 및 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야함.
• HMR을 사용하더라도 변경된 파일이 적용될 때 까지 수 초 이상 소요
• 소스 코드를 업데이트 하게 되면 번들링 과정을 다시 거쳐 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 됩니다.

 

3. Vite를 사용해야하는 이유

• Dependencies: Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공합니다.
• Source code: Vite는 Native ESM을 이용해 소스 코드를 변환 및 제공합니다. 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.

 

AS-IS 방식

• 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만이 실제 페이지를 제공

 

TO-BE 방식

• Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공

 

4. 속도 차이 테스트(신규 생성 빈 프로젝트)

• npm run serve (1677ms)

 

• npm run dev (vite) (171ms)

 

 

---

참고자료

https://ko.vitejs.dev/

Vite