떠오르는 차세대 빌드 툴 Vite는 왜 빠른가?

📒 Vite

---

바이트가 아닌 프랑스어로 “빠른”을 의미하는 비트는 차세대 번들러로서 점차 두각을 나타내고 있습니다.

 

기존 Webpack을 사용할 때 보였던 답답한 개발서버와 번들링 성능을 엄청나게 끌어올린 것으로

점점 유명세를 타고 있기 때문에 알아보지 않을 수 없겠습니다.

 

그럼 어떠한 방식으로 개발 서버와 번들링 속도를 끌어올렸는지 알아보겠습니다.

---

📌 빠른 Cold Start

CRA로 생성한 리액트 프로젝트는 기본적으로 Webpack을 탑재하고 있습니다.

 

Webpack은 여러 상황에 유연하게 대처하며 개발 하기는 좋지만 프로젝트의 사이즈가 커질 수록 개발 서버 구동시간이 지루할 정도로 길어지는 단점이 있습니다.

 

이는 번들러 기반의 개발 서버가 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 브라우저에 페이지를 제공할 수 있기 때문입니다.

 

이에 반해 Vite는 애플리케이션의 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선했습니다.

• dependencies
  개발 도중 내용이 바뀌지 않는 코드입니다.
  Vite는 Go lang으로 작성되어 Webpack 보다 번들링 속도가 10~100배 빠르지만 운영 프로덕트 번들링 도구로서 적합하지 않은 ESbuild를 개발서버에 적용함으로써 엄청난 속도의 향상을 이루었습니다.
• source code
  JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 코드입니다.
  Vite는 Native ESM을 이용해 소스 코드를 제공합니다.
  ES6에 도입된 모듈 시스템인 Native ESM은 모듈 자체를 브라우저에서 해석할 수 있기 때문에 기존 번들링 했던 코드들을 브라우저에서 직접 불러올 수 있게 함으로써 개발 서버 초기 시작 시간을 크게 줄였습니다.

---

📌 신속한 HMR(Hot Module Replacement)

Webpack으로 개발 서버를 구동할 때 사소한 부분만 수정했음에도 변경 사항이 수정되기 까지 수 초를 기다린 기억이 있습니다.

 

이는 번들러를 통해 수정된 부분을 찾고, 컴파일 하고, 적용하기 때문입니다.

 

Vite에서는 바로 위에서 설명한 Native ESM 덕분에 앱 사이즈가 커져도 갱신 시간에 영향을 끼치지 않습니다.

 

모듈이 수정되었다면 Vite는 해당 모듈을 교체 → 브라우저에서 수정된 모듈 요청 → 모듈 전달의 과정만을 거치기 때문에 신속한 갱신이 가능합니다.

 

또한 HTTP 헤더를 이용해 필요에 따라 소스 코드는 304 Not Modified로, 디펜던시는 Cache-Control: max-age=31536000,immutable을 이용해 캐시되어 불필요한 과정을 건너 뜁니다.

 

공식문서에 있는 다음 사진들을 보면 더욱 더 쉽게 이해할 수 있습니다.

---

📌 Rollup을 이용한 번들링

10~100배 빠른 ESbuild는 플러그인 API의 호환 문제 때문에 번들링시에는 사용하지 않습니다.

 

그에 대한 대안으로 유연한 플러그인 API와 인프라를 가진 Rollup을 사용하게 되었습니다.

---

🔎 번들링 방법

Rollup은 번들링 시 Webpack과는 다르게 모든 코드들을 동일한 depth로 호이스팅 해서 한번에 번들링 해버립니다.

 

모든 코드들이 같은 depth에서 번들링 되기 때문에 변수들이 충돌 될 수 있다고 생각하겠지만 상황에 따라 식별자를 변경해 충돌을 방지하기 때문에 안정성과 속도 두마리 토끼를 잡을 수 있었습니다.

 

하지만 모든 모듈들을 각각 함수로 감싸 전역 변수를 지역 변수로 변환해 변수 충돌을 방지하는 Webpack에 비교하면 안정성은 뒤떨어집니다.

---

🔎 Tree Shaking

Tree Shaking은 모듈 번들링 과정에서 사용하지 않는 코드를 자동으로 제거하여 번들 크기를 최적화하는 기술입니다.

 

MDN에서는 ES6의 모듈 시스템, 즉 import/export 문법에 의존하여 참조 여부를 판단하고 있다고 합니다.

 

그렇기에 트리 쉐이킹은 ES6의 모듈 시스템에서만 지원하고 있습니다.

 

웹팩은 기본적으로 ES6 모듈에 한해 파일 단위로만 트리 쉐이킹을 하기도 하고 하위 호환성 때문에 이용하는 ES6 문법을 CommonJS로 변환하는 바벨, 사이드 이펙트 설정 등등 잘 되지도 않는데 설정은 또 까다롭습니다.

 

그렇기에 CommonJS 코드를 ES6 코드로 변환할 수 있는 공식 플러그인을 갖춘 Rollup이 더 뛰어난 트리 쉐이킹 실력으로 더 작은 번들 파일을 생성한다고 볼 수 있습니다.

---

📌 마무리

위에서 살펴본 내용 때문에 프로젝트에 많은 라이브러리를 설치하고 규모가 커질 수록 번들링의 불안정성은 점점 커지게 되어 “규모가 큰 애플리케이션은 Webpack, 규모가 작은 라이브러리 개발은 Rollup”이란 말이 유행처럼 번졌습니다.

 

Vite가 각광을 받으며 빠르게 발전중이기 때문에 작은 단위 프로젝트부터 신중하게 도입해보며 익혀봐야겠습니다.