vite 사용 후기

---

📌 서론

개인 프로젝트를 진행하게 된지 이제 벌써 한 달을 훌쩍 넘겼다. 환경설정 부터 배포까지 한 사이클을 한번 해보고 싶다는 마음에 개인 프로젝트를 시작한 것도 있지만, 회사의 한 사이트에서 프로젝트 하나를 오래 운영하다 보니 나도 모르게 내가 모든 걸 다 알고 있다는 듯한 착각에 점점 빠지고 있는 것 같다는 생각이 들기 시작 했고, 이를 방지하기 위해 시작하게 된 이유가 더 크다.

그러다 보니 개인 프로젝트는 현재 내가 사용 중인 기술과 어느 정도 유사하지만 다른, 트렌드에 걸맞는 기술들로 엄선하고자 했다. 이런저런 입소문과 커뮤니티를 참고한 결과 요즘 핫하다는 vite를 적용해 비교 분석해보기로 했다.

실제로 높은 점유율을 가진 vite

📌 Vite란?

비트? 바이트? vite는 프랑스어로 "빠르다"라는 의미를 가지며 이름에 맞게 빠르고 간결한 개발 경험에 초점을 둔다고 한다. 발음은 veet(비트)로 읽는다고 한다.

✔️ 번들러(Bundler)

웹 생태계가 발전됨에 따라 프로젝트의 규모가 점점 커지게 되었고, 이에 따라 웹에서 파일들을 다운로드 받는 속도 역시 개선이 필요하게 되었다. 여러 파일 보다 하나의 파일 다운로드가 더 빠르다는 점을 이용해 작업한 프로젝트의 파일을 웹에 올릴 때는 하나의 파일로 압축하게 되었고, Webpack, Rollup, Parcel 등 소스코드를 파일로 묶어 브라우저에서 실행하도록 도와주는 번들링 도구들이 탄생하게 되었다. 현재는 javascript 뿐 만 아니라 HTML ,CSS, 이미지 등 다양한 파일들에 대한 압축을 도와주고 있다고 한다.

그러나 웹 앱 애플리케이션이 점점 더 발전함에 따라 처리되야 하는 Javascript 모듈의 개수도 점점 증가하게 되고, 이러한 상황은 원활한 프로세스 진행을 방해하는 성능 병목 현상을 발생시킨다.
Vite는 해당 문제에 대한 해결책을 제시한다.

✔️ Vite의 구동 방식

기존 번들러는 애플리케이션의 모든 소스 코드에 대한 빌드 과정을 마친 후 페이지를 제공 했습니다. 때문에 빌드 후 서버를 구동 또는 재구동하는 과정에서 꽤나 많은 시간을 소요했습니다.

기존 번들링 구조

vite는 현재 페이지에 변경점이 생기면 해당 페이지에서 필요로 하는 모듈만을 수정한 뒤 갱신합니다. ESM을 모듈 시스템으로 사용하고 있기 때문에 브라우저에서 어떤 모듈에 대한 교체를 요청하면 클라이언트는 해당 모듈을 전달하기만 하면 되기 때문에 앱의 크기와 상관 없이 HMR을 포함한 갱신 시간에는 크게 영향 받지 않습니다.

Vite의 Native ESM 구조

또한 사전 번들링 시에는 기존 번들러 대비 10~100배 빠른 번들링 속도를 자랑하는 Esbuild를 사용 중이라고 합니다. 다만 Esbuild 자체가 아직 Code-Spliting 및 css 관련 처리가 완전하지 않아 프로덕션 중에는 Rollup을 사용하고 있다고 한다.

📌 사용 후기

일단 정말 빠르다. 빌드 속도도 기존 번들러 대비 차이 나는게 체감될 정도다.

vite 빌드 과정

파일을 변경한 경우 로그로 변경된 부분을 알려준다

가끔 파일을 수정한 뒤 저장하면 빌드가 너무 오래 걸려서 일부로 모아뒀다 한번에 저장할 때도 있었는데 프로젝트를 진행하면서 그런 걱정은 없어 좋았다. 결론은 만족도가 아주 높았고, 앞으로 다른 개발자 분들께도 추천할 계획이다. 아직 사용해 보지 않았다면 한번 해보길 강력히 추천한다.