Webpack과 Vite 둘 다 프론트엔드 개발에서 사용되는 모듈 번들러 및 빌드 도구이다. 둘 의 차이점은 뭘까?

"Webpack을 사용하는 이유가 뭘까?"

webpack은 2012년에 처음 출시되었으며, 많은 기능과 안정성을 축적해왔다. 또 오래된 만큼 커뮤니티나 블로그를 통해 사용법이나 이슈 조치에 대한 레퍼런스를 쉽게 찾아볼 수 있어 이미 많은 프론트엔드 개발자들이 선택하여 사용하고 있다.

또  VueJS 뿐 아니라 React, Angular와 같이 다양한 프레임워크를 지원하는 등 장점이 많아 번들러 도구로써 인기가 시들지 않고 있다.

하지만 필자는 이미 오랫동안 잘 사용하고 있는 webpack을 vue에서는 vite를 사용하는 것이 유리하고 생각한다.

"Webpack이 아닌 Vite를 사용해야 하는 이유가 뭘까?"

단 하나로 정의된다. 빌드 속도가 정말정말 빠르다. Vite는 초기 렌더링 속도가 빠르고 HMR( Hot-Module Replacement )을 통해 빠른 개발 속도를 지원한다.

특히 Vite는 VueJS에 최적화 되어 있다. VueJS 창시자 Evan You가 개발하였기 때문이다.

"도대체 얼마나 빠른 걸까?"

현재 현업에서 개발 중인 동일한 프로젝트로 얼마나 걸리는 지 테스트해보았다.

다음은 webpack으로 build했을 때 걸리는 시간이다. '11.515초'가 걸렸다.

다음은 vite로 build 했을 때 걸린 시간으로 무려 '0.5초'가 걸렸다.

"마치며"

이번에 연구과제를 진행하면서 vite에 존재를 알았고 기존 webpack에서 vite로 마이그레이션을 하였다. 0.5초만에 내가 작성한 코드를 바로 화면에서 확인할 수 있다는 것은 엄청나게 큰 메리트가 있다. IT에서 시간은 비용과 밀접한 관련이 있기  때문에 한 번 변경해보는 것은 어떨까?