2019년 Vue London에서 발표된 Vue 3.0, 일명 vue-next가 공개되었다. 그 후에 3.0 pre-alpha가 공개되고, 이번엔 Vite라는 웹 개발 툴이 공개되었다. 과연 Vite가 뭐길래! 그리고 webpack과의 차이점을 알아보자.
서론
Vue는 태생부터 속도와 가벼움을 추구했다. 그 노력으로 현재의 20KB min + gzip의 가벼운 프레임워크를 만들어냈다. 하지만 Vue 2.6의 한계가 서서히 다가옴에 따라 3.0을 공개하게 되었는데. 크게 나누어보면
- App 마운트 방식 변경
- 루트 element 제한 삭제
- 컴포넌트 렌더링이 완료되기 까지의 fallback 컨텐츠 제공
- 다중 v-model
등의 아주 기대되는 기능이 많다. 하지만 오늘 주목해볼 것은 vite이다.
Vite란?
Vite는 네이티브 ES 모듈을 지원하는 웹 개발 툴이다. 번들 시에는 Rollup을 사용하여 프로덕션 빌드를 제공한다. 아직 experimental 단계이며, Vue 3와 동작하게 설계되었지만, React를 지원한다.
Vite의 장점
- 기존의 장점 대부분 유지
- 아주 빠른 콜드 서버 스타트
- 인스턴트 Hot Module Replacement (HMR)
- 진정한 온-디맨드 형식
장점을 보았을 때는 대부분 기존의 webpack과 다를게 없다고 한다. 하지만 직접 사용을 해보면 다르다. Vite는 소스 코드의 ES Import syntax를 바로 브라우저로 제공한다. 그리고 브라우저는 <script module> 네이티브 지원을 이용해 각각의 import마다 HTTP 요청을 한다. 또한 필요할 경우에는 코드 변경 작업을 한다.
이로 인해 얻는 장점으로는:
- 번들링이 없어 아주 빠른 콜드 서버 스타트 (필자의 경우는 Vite가 약 2초, webpack이 약 15초)
- 코드는 필요에 따라 컴파일되므로 현재 화면에서 실제로 가져온 코드만 컴파일된다. 전체 앱이 번들링될 때까지 기다릴 필요가 없다!
- 모듈의 갯수에 따라 HMR의 성능이 좌우되지 않는다. 이로 인해 앱이 얼마나 크든 HMR의 성능이 하락하지 않는다.
하지만 폴 페이지 로드에서는 ES Import syntax를 바로 브라우저로 제공하기 때문에, ES import chain (고리처럼 반복되는 import)로 발생하는 network waterfall 때문에 큰 앱에서는 번들링으로 구성된 앱보다 살짝 느릴 수 있다. 하지만 프로덕션 빌드에서는 해당 사항이 없으므로, 이러한 단점을 거의 다 무시할 정도로 어마어마한 장점을 가지고 있다.
es-dev-server와의 차이점
- Vite는 개발과 빌드 프로세스를 통합하는 단일 도구가 되는 것을 목표로 한다. Vite를 사용하여 아무 설정 없이 같은 소스코드로 개발과 번들링을 할 수 있다.
- Vite는 정적 에셋 (.css 등)을 import할 때 많은 처리 방법을 제공한다. 마치
vue-cli처럼.
Vite의 단점과 미래
- 풀 페이지 로드에서의 네트워크 성능 저하
- 아직 CSS Preprocessor의 HMR을 지원하지 않는다.
- 이 외에 아직 개발되지 않은 기능
앞서 말한 것 처럼, ES Module의 import chain으로 인한 부하가 있다. 그리고 아직 experimental 버전의 한계로, 개발되지 않은 기능이나 아직 최적화되지 않는 부분이 있다. 하지만 지금도 토이 프로젝트나 작은 프로젝트에서도 쓸 수 있을 정도로 잘 만들어진 프로젝트이다. Node 12의 ESM 지원과 더불어 앞으로 Vue 3와 함께 릴리즈 될 미래가 기대된다.