Vite 는 Webpack을 대체 가능할까?

Eamon·2022년 5월 4일

vite webpack 번들러

vite란?

vite 공식문서 Getting started 의 첫 줄을 보면,

vite 는 프랑스어로 빠르다 를 의미합니다.

라는 설명이 있습니다.

이 설명 그대로 vite 는 "빠른" 자바스크립트 번들링 툴입니다. 대표적인 자바스크립트 번들링 툴은 Webpack 과 Rollup 등이 있습니다.

vite 는 두가지 특징을 가지고있습니다.

매우 빠른 HMR(Hot Module Replacement) 과 같이 기본 ES 모듈 보다 향상된 기능 을 제공하는 개발 서버입니다.
프로덕션을 위해 고도로 최적화된 정적 소스를 출력하도록 사전 구성된 Rollup 과 코드를 번들로 묶는 빌드 명령입니다.

Webpack vs vite

실제로 웹팩과 비교해서 vite 가 얼마나 빌드시간이 빠른지 React - TypeScript 보일러 플레이트를 생성하여 비교해보았습니다.

build time

vite (1.40s)      <    webpack (2.83s)

dev-server ready time

vite (1.81s)      <    webpack (7.80s)

완벽히 같은 파일로 컴파일 해본 건 아니지만 vite 서버의 빌드 타임과 dev server ready time 이 훨씬 더 빠른 것으로 알 수 있습니다.

왜 빠를까?

우선 dev server 시작 시간이 빠른 이유는 esbulid를 이용하여 종속성을 미리 묶기 때문입니다. esbulid는 Go 언어로 작성된 매우 빠른 번들러로, Go 언어의 특화된 병렬처리로 빠르게 번들링 해줍니다.

Vite는 기본 ESM 을 통해 소스 코드를 제공합니다 . 이것은 본질적으로 브라우저가 번들러 작업의 일부를 인계받게 하는 것입니다. Vite는 브라우저가 요청할 때 요청에 따라 소스 코드를 변환하고 제공하기만 하면 됩니다. 조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.

그러나, 프로덕션 빌드에서는 esbulid를 사용하지 않고 있다고 합니다. (아직 esbuild가 1버젼이 넘지 않았고 용량이 큰 프로덕션 버젼에서 필요한 트리쉐이킹이나 코드스플리팅과 같은 최적화 기능을 제공하지 않기 때문입니다.)
대신, 당분간 이런 측면에서 보다 유연한 Rollup을 이용하여 번들링하고 있습니다.

Rollup 또한 역시 Webpack 보다는 번들링 속도가 빠릅니다.

롤업의 작동방식은 모든 모듈을 함수로 랩핑하는 webpack 과는 다르게 코드들을 동일한 수준으로 올리고 한번에 번들링을 진행하기 때문에 빠릅니다. 롤업에서 식별자 충돌을 상황에 따라 식별자를 변경해 방지하고 있습니다.

CRA 와 Vite

CRA는 페이스북에서 제공하는 Webpack 기반 react 보일러 플레이트 입니다. Vite도 여러가지의 보일러플레이트를 제공하는데 그중에 react 와 react-ts 가 존재하므로 CRA 대신에 vite 를 사용할 수도 있을 것 같습니다.

Vite 의 SSR

아쉽게도 vite의 ssr 지원 단계는 아직 experimetal 단계 입니다. 그렇기 때문에 vite 와 next.js 와 같은 ssr 프로덕트를 쓰려면 vite-plugin-ssr 과 같은 플러그인의 도움을 받거나 Webpack으로 빌드해서 프로덕트에 사용해야할 것 입니다.