웹팩(Webpack)과 비트(Vite)의 성능을 실험해보았다.

급하신 분들을 위해 결과 표는 맨 하단에 있음을 알립니다.

 

---

 

나는 평소 느린 걸 싫어한다. 무엇을 하든 답답한 게 싫고, 귀찮은 게 싫고, 자유롭지 못한 게 싫다.

 

웹 빌드 속도도 마찬가지였다. 빌드를 돌리기만 하면 다른 짓을 하기에는 애매했고....

그렇다고 기다리자니 좀 걸리는 것 같은데? 이런 딜레마에 빠져있었을 때가 있었다.

 

이 딜레마는 반복된다....

 

그중 vite를 만나서 오랜 고통 속에서 해방됐다고 할까....

 

빠르게 변화하는 시대에 맞게 기존 자바스크립트를 개선하고자 많은 도구들이 등장했는데 그중 하나가 vite다.

Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷하다.

 

webpack과 같은 번들러이며 vite는 이전의 번들러의 문제점을 해결하고자 많은 개선이 되었다.

번들러는 여러 개별 파일 및 종속성을 하나의 단일 파일로 묶어주는 역할을 하며 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있다.

 

그중 vite에서 소개하는 바로는,

1. Go언어로 작성된 Esbuild를 사용하여 기존 번들러보다 10배에서 100배 정도의 빠른 속도를 제공한다.
2. Native ESM을 이용하여 요청시에 소스 코드를 변환하고 제공하여 느리던 소스 코드를 빠르게 제공할 수 있다.

 

기존 번들러들은 소스 코드를 하나로 묶어서 제공하는 방면

 

Native ESM을 이용한 vite는 요청시에만 소스 코드를 제공하여 빠르다.

 

이렇게나 빠른 Vite를 사용하지 않을 이유가 있나요?

 

사이드 프로젝트에서는 이미 vite를 사용중이였지만 실제 중요한 프로젝트에서는 webpack을 주로 사용하고 있었다. 안정성이 이유였지만 이제는 어느정도 안정성이 보장된 vite로 이주하는 게 맞다고 판단했다. 

 

그러던 중 평소에도 빠르다고 느꼈지만 문득 성능이 정말 얼마나 차이가 나는지 궁금하여 실험을 해보기로 하였다.

 

실험은 react 기본 구동에 수동으로 각각 webpack과 vite만을 설치하여 구동하였다.

소스 코드고 뭐고 정말 아무 것도 없다.

 

화면에 이거 하나 밖에 안보인다.

 

그리고 빌드 때마다 작업 속도에 오차가 있기 때문에 10회중 평균 값에 근사한 값으로 결과를 내고자 했다.

아래는 결과다.

 

 

webpack build

vite build

 

webpack으로 빌드했을 때는 "5733ms"로 대략 6초 정도의 시간이 소모되었다. 

vite로 빌드했을 때는 "1620ms"로 대략 2초 정도의 시간이 소모되었다.

	webpack	vite
빌드 속도(Build)	5733ms	1020ms
빌드 속도(Done)	6690ms	1620ms

 

 

확실히 vite가 빠르다?

 

그렇다면 build가 아닌 경우에는 어떨까 싶어서 확인해보았다.

 

vite dev

webpack dev

 

vite로 dev 진입시 402ms가 소요되었다.

webpack으로 dev 진입시 5360ms가 소요되었다.

	webpack	vite
빌드 속도(Build)	5733ms	1020ms
빌드 속도(Done)	6690ms	1620ms
Dev 속도	5360ms	402ms

 

아무래도 Native ESM으로 처리하는 vite는 요청시에만 필요한 소스 코드를 변환하는데에 비해 웹팩은 전체적인 번들 과정을 거치기 때문에 속도에서는 비교할 수가 없었다.

 

그렇다면 vite의 swc도 사용해보면 어떨까?

 

이번에는 vite에서 swc 컴파일러도 지원하는 플러그인이 있길래 (swc + esbuild)면 더 속도가 빨라지지 않을까 싶어서 플러그인을 냅다 적용하고 실험해봤다.

 

vite SWC 사용하고 dev

vite SWC 사용하고 build

 

	webpack	vite	vite(swc)
빌드 속도(Build)	5733ms	1020ms	774ms
빌드 속도(Done)	6690ms	1620ms	1290ms
Dev 속도	5360ms	402ms	448ms

 

보면 알겠지만 build 속도는 개선되었으나, dev 속도는 조금은 느려진 면이 없지않아 있다.

홈페이지를 찾아보니 아래와 같았다.

 

개발중에는 babel 대신 swc를, 빌드중에는 esbuild와 함께 사용

 

개발 속도는 babel 대신 swc를 사용한다는데 어찌 일반보다도 더 느린지 의문이 들어서 조금 실험을 더 했다.

 

	webpack	vite	vite(swc)
빌드 속도(Build) * 빈 프로젝트	5733ms	1020ms	774ms
빌드 속도(Done) * 빈 프로젝트	6690ms	1620ms	1290ms
Dev 속도 * 빈 프로젝트	5360ms	402ms	448ms
빌드 속도(Build) * 조금 디자인함	11192ms	1200ms	1220ms
빌드 속도(Done) * 조금 디자인함	12140ms	1780ms	1790ms
Dev 속도 * 조금 디자인함	11147ms	498ms	401ms

 

조금 실질적으로 웹 페이지 구성을 갖춘 채 테스트를 한번 더 해보았다.

결과적으로 실험 내용은 이러하다.

 

vite(swc)는 솔직히 말하면 기본으로 사용한 vite와 큰 차이를 느끼지 못했는데 다음에 큰 프로젝트에 적용하여 실험해보아야 정확한 값을 기대할 수 있을 것 같단 생각이 든다.

 

아, webpack은 그저 느리고 어디 하나 나을 구석이 없다.

 

아 그리고 또, 말로는 vite가 기본 번들링 속도는 10배에서 100배정도 빠르다고 했었는데 그건 아닌 것 같단 말이지....

 

그래서 ㅋㅋ 사용 안할거야?

 

어찌됐든, 실험을 통해 알게 된 것은 확실히 vite가 webpack보다는 빠르다는 것이다.

최소 5배에서 10배는 빠르니 무리없으면 사용하자.