[Vite] Vite 란?

🤓 시작하며 

최근 사이드 프로젝트를 시작하며 vite 라는 것에 대해 알게되었다. 팀원들이 그렇게 좋다며 극찬하던 vite에 대해서 알아보자.

---

vite 란?

 

Vite(프랑스어로 "빠르다(Quick)"를 의미합니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

 

 

우선 공식문서의 글은 아래와 같다. 

브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했습니다.
Webpack, Rollup 그리고 Parcel과 같은 도구는 이런 번들링 작업을 진행해줌으로써 프런트엔드 개발자의 생산성을 크게 향상시켰습니다.
하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 수천 개의 모듈이 존재하는 것도 대규모 프로젝트에서는 그리 드문 일이 아닙니다. 이러한 상황에서 JavaScript 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때 까지 수 초 이상 소요되곤 했습니다. 이와 같은 느린 피드백 루프는 개발자의 생산성과 행복에 적지 않은 영향을 줄 수 있습니다.
Vite는 이러한 것에 초점을 맞춰, 브라우저에서 지원하는 ES Modules(ESM) 및 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하고자 합니다.

 

거창해 보이지만 주목해야 할 부분은 가장 마지막 줄에 있다. 요약하자면 번들링 도구로도 해결하지 못한 성능 병목 현상과  느린 서버 구동 시간을 해결하기 위해 나온 것이 바로 vite 라는 것이다. 

 

기존 webpack 과 같은 모듈 번들러를 사용한 서버 구동 방식

 

기존의 번들러 기반으로 개발을 진행할때에는 서버 구동시에 모든 파일에 대한 번들링을 수행한뒤, 이를 다시 웹페이지에서 불러왔다. 이는 서비스가 커질수록 소스코드 갱신 시간 또한 선형적으로 증가하는 결과를 낳는다.

 

Native ESM 을 사용한 서버 구동 방식

 

하지만 vite의 경우, 번들러가 아닌 ESM을 이용하였다. 어떤 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만을 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다. 이 과정에서 완벽하게 ESM을 이용하기에, 프로그램의 사이즈가 커져도 HMR(Hot Module Replacement)을 포함한 갱신 기간에는 영향을 미치지 않는다. 

---

✏️ 마치며

vite를 사용하며 느낀 개인적인 만족도는 아주 높다. 특히 서버 구동시간이 굉장히 빨라져서 다른 사람에게 프로젝트를 보여줄때 뻘쭘하게 빌드를 기다리는 시간이 줄어서 가장 좋다 ㅋ 빌드시 사용하지 않는 변수를 정리해야한다는 점이 귀찮긴 하지만 장기적으로는 그 편이 조금이나마 클린코드를 만들게 되니 오히려 좋다. 더 좋은 개발도구가 나오지 않는 이상 vite를 다음 프로젝트에도 가져가고 싶다.

---

참조 페이지

https://ko.vitejs.dev/guide/

Vite