리액트를 이용해서 프로젝트를 하다 보면 실질적으로 CRA보다 Vite를 더 많이 사용하는 것을 볼 수 있을 것이다.
나 역시도, 리액트를 통해 프로젝트 과제를 진행했을 때 CRA보다 Vite를 사용하는 것이 더 좋다고 피드백을 받았고 해당 피드백을 적극 수용해서 Vite로 프로젝트를 완성하기도 했다.
프로젝트가 끝나고 나서야, 왜 Vite를 더 많이 사용하는 것일까? 왜 Vite 사용을 추천하는 것인지 궁금했다.
그래서, Vite가 무엇이고 왜 Vite를 사용하는 것이 좋은지 Webpack과 비교하여 알아보려고 한다.
🔗 Vite는 무엇인가?
vite는 자바스크립트 번들링 툴 중 하나로 빠른 속도를 자랑하는 번들링 툴이기도 하다.
기본적으로 자바스크립트 번들링 툴에는 Webpack이 있는데 Vite는 Webpack에 비해 빠르다는 큰 장점이 있다.
Vite 공식 문서에도 이러한 Vite의 특징과 장점을 강조하고 있는데, 만약 애플리케이션이 점점 더 발전되어 자바스크립트 모듈의 개수도 극단적으로 증가하게 된다면 성능 병목 현상이 분명 발생하게 되는데 이때 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 하는 문제가 발생하게 된다. 이러한 문제점을 해결하기 위해서 Vite는 해당 이슈에 초점을 맞추게 되었고 브라우저에서 지원하는 ES Modules 및 네이티브 언어로 작성이 된 자바스크립트 도구를 활용해서 문제를 해결하고자 했다고 언급하고 있기도 하다.
이처럼 Vite는 기존 자바스크립트 번들링 툴의 문제점이기도 했던 속도를 개선한 자바스크립트 번들링 툴이기도 하다.
실제로 Vite를 사용해보면 기존 번들링 툴보다 속도가 빠르다는 것을 직접적으로 느낄 수 있을 것이고, 만약 프로젝트 규모가 더욱더 커지는 상황이라면 이러한 Vite의 특징이 아주 큰 장점으로 다가올 수 있을 것이다.
💡 Vite vs Webpack
사실 Vite의 경우 많은 부분에서 개발이 진행되고 있지만 아직까지 완전한 부분을 지원하지는 않기 때문에 일부 제한적인 영역이 존재하기도 한다.
다만, 꽤 많은 현업에서 Webpack이나 CRA 대신 Vite를 많이 사용하고 있는 추세이고 또, Vite가 꾸준히 개발되고 개선된다면 빠른 속도를 장점으로 Webpack을 대체할 수 있지 않을까 생각한다.
그러나, 다양한 라이브러리를 상황에 맞게 적절히 사용하는 것처럼 번틀링 툴 역시 프로젝트의 특성에 따라서 적절히 사용하는 것이 더 올바른 방식이라고 생각하고 다양한 번들링 툴이 지금보다 더 꾸준히 개선될 거라 생각하기 때문에, 다양한 번들링 툴을 직접 사용해 보면서 몸소 그 차이점을 느껴보는 것이 중요하다고 생각한다!
✅ Vite 공식 문서
https://ko.vitejs.dev/guide/
