Vite — Webpack 100배 빠른 번들러

이 토픽을 마치면

번들링이 왜 필요한지 알게 되고, Vite가 Webpack보다 빠른 이유를 설명할 수 있게 됩니다.

먼저, 번들링이 왜 필요한가

예전에는 HTML 파일 하나, CSS 파일 하나, JavaScript 파일 하나 만들어서 서버에 올리면 끝이었습니다.

근데 요즘은 npm install react를 하는 순간 node_modules 폴더가 생기고, 여기에 리액트 소스코드가 수십 MB 들어옵니다. 이걸 그대로 서버에 올릴 수는 없겠죠.

그리고 JavaScript 파일끼리 import로 서로를 불러오는데, 예전 브라우저에서는 이 import 문법이 아예 안 됐습니다.

**번들링(Bundling)**은 이 문제를 해결합니다. 여러 개의 JavaScript 파일을 하나로 합치고, 필요 없는 코드를 잘라내고, 브라우저가 실행할 수 있는 형태로 변환해줍니다.

Webpack의 문제

가장 유명한 번들러가 Webpack입니다. 잘 돌아갑니다. 근데 프로젝트가 커지면 문제가 생깁니다.

미리보기를 띄우려면 전체 프로젝트를 번들링해야 하는데, 라이브러리가 많아지면 이게 5초, 10초, 심하면 수십 초가 걸립니다. 코드 한 줄 고치고 결과를 보려면 또 기다려야 합니다.

Webpack으로 만든 리액트 프로젝트를 띄우면 5~6초. 매번 코드 수정할 때마다 이 시간을 기다리면, 하루에 수십 분을 번들링에 쓰게 됩니다.

Vite가 빠른 이유 두 가지

Vite(프랑스어로 "빠른")는 두 가지 원리로 이 문제를 해결했습니다.

첫째, esbuild로 프리번들링합니다.

Webpack은 JavaScript로 만들어져서 느립니다. Vite는 라이브러리를 미리 변환하는 작업에 esbuild라는 도구를 씁니다. esbuild는 Go 언어로 만들어져서 기존보다 최대 100배 빠릅니다.

둘째, 소스코드는 번들링하지 않습니다.

요즘 브라우저는 import 문법(ESM)을 기본 지원합니다. Vite는 이걸 이용해서 파일을 합치지 않고 그대로 브라우저에 넘깁니다. 번들링 자체가 없으니 당연히 빠릅니다.

코드를 수정하면? 수정된 파일 하나만 다시 보내주면 됩니다. 이걸 HMR(Hot Module Replacement)이라고 합니다. Webpack도 HMR을 지원하지만, Vite가 더 빠릅니다.

결과:

Webpack 미리보기 시작: ~5초
Vite 미리보기 시작:    ~0.3초

시작하는 법

npm create vite@latest my-app
cd my-app
npm install
npm run dev

이 네 줄이면 Vite 프로젝트가 만들어지고 미리보기가 뜹니다. 리액트, Vue, Svelte 등 원하는 프레임워크를 템플릿으로 선택할 수 있습니다.

코드 짜는 방식은 Webpack 프로젝트와 동일합니다. 컴포넌트 만들고, import하고, 배포하고 — 전부 같습니다. 번들링이 빨라졌을 뿐입니다.

Vite 이전에는 뭘 쓰고 있었나

프론트엔드 빌드 도구의 역사를 간단히 보면:

Create React App(CRA)이 내부적으로 Webpack을 쓰고 있어서, 리액트 입문자는 Webpack을 직접 설정한 적이 없어도 사실 Webpack을 쓰고 있었던 겁니다. 2023년부터 CRA가 공식 권장에서 빠지면서, 새 프로젝트는 Vite나 Next.js로 시작하는 게 표준이 됐습니다.

참고로 Vite는 "비트"라고 읽습니다. 프랑스어로 "빠른(fast)"이라는 뜻이고, Vue.js 창시자 Evan You가 만들었습니다. Vue뿐 아니라 React, Svelte, 심지어 Vanilla JS도 지원하는 범용 도구입니다. 프레임워크에 종속되지 않는다는 점이 Vite의 강점입니다.

핵심

번들링은 여러 JS 파일을 하나로 합치는 작업이고, Webpack이 대표 도구였습니다. Vite는 esbuild(100배 빠른 사전 처리) + ESM(소스 번들링 생략)으로 체감 속도를 극적으로 개선했습니다. 코드 짜는 법은 바뀌지 않습니다. 도구만 바꾸면 됩니다.