Vite
"Vite - Next Generation Frontend Tooling"
— Vite 공식 문서 헤더 슬로건
웹팩의 굼벵이 같은 속도에 넌더리가 난 개발자들을 구원하러 온 번개의 화신이자, 한번 맛보면 다시는 과거의 빌드 대기 시간으로 돌아갈 수 없게 만드는 마약 같은 빌드 인프라. 프랑스어로 '빠르다'는 뜻에 걸맞게 정말 미치도록 빨라서, Vite 개발 서버를 켜놓고 커피 한 잔 마시러 가던 멍 때리기 루틴이 사라진 개발자들의 원망을 아주 쬐끔 듣고 있다
1. 개요
Vite(불어 발음으로 '비트', 영어 발음으로 '바이트')는 뷰(Vue.js)의 창시자인 에반 유(Evan You)가 2020년 개발한 프론트엔드용 차세대 빌드 및 개발 도구다. 기존의 Webpack이 소스코드를 매번 전부 번들링해서 개발 서버를 띄우느라 속도가 처참하게 느렸던 태생적 한계를 정면으로 비웃으며 등장했다. 브라우저가 직접 모듈을 로딩하는 Native ESM과 Go 언어로 작성된 초고속 어셈블러 Esbuild를 융합하여, 코드 양에 상관없이 0.1초 만에 켜지는 전설적인 속도의 개발 환경을 개척했다.(...)
2. Vite가 번개처럼 빠른 이유: Esbuild와 Native ESM의 결합
2.1. 번들링을 아예 하지 않는 개발 서버!
기존 Webpack이나 Rollup 같은 전통적인 번들러들은 아무리 작은 수정을 가해도 전체 소스코드를 다시 싹 모아 하나의 파일로 재구성(Bundle)한 뒤 브라우저에 던져줘야 했다. 이 때문에 파일이 늘어날수록 로컬 개발 서버 구동과 HMR(핫 모듈 대체) 속도가 끔찍하게 느려졌다.
Vite는 개발 환경에서 번들링 단계 자체를 과감히 생략해 버렸다.
- Native ESM의 구동: 최신 웹 브라우저들은 모듈을 스스로 요청하고 가져올 수 있는 기능을 내장하고 있다. Vite는 소스코드를 사전에 합치지 않고, 브라우저가 특정 모듈을 요청할 때(예:
import React from 'react') 딱 해당 파일만 즉석에서 가공해 가볍게 응답해 준다. - Esbuild의 사전 번들링: 브라우저가 매번 수백 개의 npm 패키지를 개별 요청하면 병목 현상이 생기므로, Go 언어로 밑바닥부터 짠 초고속 트랜스파일러인 Esbuild를 사용하여 외부 패키지(node_modules)들을 최초 1회만 고속 압축 가공해 둔다. Esbuild는 자바스크립트로 짠 웹팩에 비해 최소 10배에서 최대 100배 이상 무지막지하게 빠르다.(...)
이 영리한 이중 엔진 설계 덕분에 개발자는 프로젝트가 기가바이트 단위로 커지더라도 한결같은 0.1초 초고속 핫 리로딩 성능을 만끽할 수 있게 되었다.
3. 배포(Production) 빌드의 반전: 든든한 롤업(Rollup)의 후원
3.1. 왜 배포할 때는 여전히 번들링을 할까?
개발 서버에서는 번들링 없는 광속 ESM 구동을 자랑하는 Vite이지만, 정작 프로덕션 빌드(배포용 파일 생성) 명령인 vite build를 치면 얌전하게 소스코드를 한군ده로 뭉쳐 압축하는 전통적인 번들링을 수행한다. 아직 인터넷 환경에서 수많은 개별 파일들을 잘게 쪼개 내려받는 비번들링 방식은 네트워크 요청 오버헤드와 브라우저 캐싱 비효율성을 초래하기 때문이다.
이때 Vite의 배포 빌드 엔진으로 활약하는 구세주가 바로 Rollup이다. 롤업은 정적 분석을 기반으로 안 쓰는 코드를 칼같이 잘라내는 트리 셰이킹(Tree Shaking) 성능이 업계 최고 수준으로 뛰어나며, 고도로 최적화된 경량 번들을 뱉어내기로 유명하다.1
결국 Vite는 '개발 환경은 Esbuild + Native ESM으로 광속으로, 배포 환경은 Rollup으로 견고하고 정밀하게'라는 완벽하게 타협된 양면적 아키텍처를 가짐으로써 현대 프론트엔드 업계의 신뢰를 듬뿍 얻게 되었다.2
4. 관련 밈 및 드립
4.1. 웹팩 쓰던 시절로 돌아갈 수 없어
Vite를 한 번이라도 접해본 프론트엔드 개발자들이 겪는 일종의 'Vite 역치 돌파' 증후군.
신규 프로젝트를 Vite로 시작했다가 피치 못할 사정(레거시 패키지 호환성 등)으로 웹팩 기반의 대형 프로젝트를 건드려야 할 때, 개발 서버 실행 속도와 코드 수정 후 화면 반영 딜레이를 견디지 못하고 '웹팩 쓰던 시절에 내가 어떻게 일했지?'라며 가슴을 쥐어뜯는 넋두리가 커뮤니티의 단골 짤방으로 올라온다. Vite 개발 서버의 속도는 가히 마약과도 같아서 개발 생산성의 표준을 완전히 올려버렸다.(...)
5. 여담
- Evan You의 미니멀리즘: 에반 유는 미적 감각과 미니멀리즘을 중시하기로 유명하다. Vite는 프랑스어로 '빠르다'는 단어에서 따왔으며, 로고 역시 번개(
⚡)와 보라색 그라데이션이 어우러진 현대적이고 감각적인 디자인을 채택하여 개발자들의 시각적 덕심(?)을 깊이 자극했다. - Vite-plugin-react의 강력함: React 커뮤니티 역시 Vite를 대단히 열렬히 환영하며, 기존의 CRA 대신 'Vite + React' 템플릿을 사실상의 표준 리액트 스타터킷으로 밀어주고 있다. Fast Refresh가 네이티브하게 물려 있어 눈 깜짝할 사이에 코드가 반영된다.
- Vite의 가벼운 설정: 웹팩 설정 파일이 온갖 정규식과 플러그인 인스턴스로 수백 줄을 넘어가는 반면, Vite의 설정 파일(
vite.config.js)은 단 15줄 내외로 극단적으로 심플하다. 웬만한 유용한 설정은 기본 탑재되어 있어 추가로 건드릴 필요가 거의 없다.(...)