이 글은 Vite 공식 문서를 번역한 글입니다.
JavaScript 모듈화
브라우저에서 ESM(ES Module)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링"이라는 해결 방법을 사용해야 했다.
Webpack, Rollup, Parcel 등과 같은 툴은 번들링 작업을 진행해주면서 프론트엔드 개발자의 생산성을 크게 향상시켰다.
그러나 애플리케이션이 거대해지고 복잡해짐에 따라서 처리해야 하는 JavaScript 모듈의 개수도 기하급수적으로 증가하고 있다. 심지어 수천 개의 모듈이 존재하는 대규모 프로젝트도 존재하며, 이런 상황에서 JavaScript 기반의 툴은 성능 병목 현상이 발생됐다. 이는 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR(Hot Module Replacement)을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상이 소요되기도 했다. 이와 같은 느린 피드백 루프는 개발자의 생산성과 행복에 적지 않은 악영향을 주게 되었다.
Vite는 이런 관점에 입각해서 브라우저에서 지원하는 ESM 및 네이티브 언어로 작성된 JavaScript 도구를 활용해 문제를 해결한다.
지루할 정도로 길었던 서버 가동
최초로 실행되어 이전에 캐싱한 데이터가 없는 콜드 스타트 방식으로 개발 서버를 가동할 때, 번들러 기반 툴의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야 실제 페이지를 제공할 수 있다.
Vite는 애플리케이션의 모듈을 Dependencies와 Source Code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선한다.
- Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드.
- 기존 번들러로는 컴포넌트 라이브러리와 같이 수백 개의 JavaScript 모듈을 보유한 매우 큰 의존성에 대한 번들링 과정이 매우 비효율적이었고 많은 시간을 소요했다.
- Vite의 사전 번들링 기능은 Esbuild를 사용한다. Esbuild는 Go로 작성되어 Webpack, Parcel 등 기성 번들러에 비해 10배에서 100배까지 빠른 번들링 속도를 제공한다.
- Source Code: JSX, CSS, Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정 또한 매우 잦은 비일반적인 JavaScript 소스 코드.
- Vite는 Native ESM을 이용해 소스 코드를 제공한다. 이것은 근본적으로 브라우저가 번들러 작업의 일부를 차지할 수 있도록 한다.
- Vite는 브라우저가 요청하는대로 소스 코드를 변환하고 제공하기만 하면 된다. 조건부 동적 import 이후 코드는 현재 화면에서 실제로 사용되는 경우에만 처리한다.
느렸던 소스 코드 갱신
기존 번들 기반 서버로 개발을 진행할 때, 소스 코드를 수정하게 되면 번들링 과정을 다시 수행해야 했다. 따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 된다.
일부 번들러는 메모리에서 작업을 수행하여 실제로 갱신에 영향을 받는 파일들만을 새롭게 번들링하도록 했지만, 결국 처음에는 모든 파일에 대한 번들링을 수행해야 했다. 모든 파일을 번들링하고 이를 다시 웹 페이지에서 불러오는 것이 얼마나 비효율적인지 생각해보자. 이러한 이슈를 해결하기 위해서 등장한 것이 HMR이지만 이것이 모든 것을 해결해주기에는 명확한 해답을 제시하지 못했다.
그렇다고 Vite가 HMR을 지원하지 않는 것은 아니다. 다만, 번들러가 아닌 ESM을 이용하는 것이다. 어떤 모듈이 수정되면 Vite는 수정된 모듈과 관련된 부분만을 교체한다. 그리고 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다. 이 모든 과정에서 ESM을 완벽하게 이용하고 있기 때문에 애플리케이션 크기가 비대해져도 HMR을 포함한 갱신 시간에는 부정적 영향을 끼치지 않는다.
Vite는 추가적으로 HTTP 헤더를 활용해서 전체 페이지의 로드 속도를 향상시킨다. 필요에 따라 Source Code는 304로, Dependencies는 Cache-Control: max-age=31536000, immutable을 이용해 캐싱된다. 이렇게 함으로써 요청 횟수를 최소화해서 페이지 로딩을 빠르게 만든다.
Vite 프로젝트 시작하기
Vite는 프랑스어로 "빠르다"는 단어다. 발음은 "비트"라고 한다. 이름대로 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 툴이다. Vite가 중점적으로 여기는 두 가지 개념은 다음과 같다.
- 개발 시 네이티브 ESM을 넘어 다양한 기능을 제공한다.
- 번들링 시 Rollup 기반의 다양한 빌드 커맨드를 제공한다.
Vite는 합리적인 기본 설정을 제공하며, 타입이 완벽하게 제공되는 플러그인 API와 JavaScript API를 통해 높은 수준의 확장성을 제공한다.
Vite는 18+ 버전의 Node.js를 요구한다.
# npm 7+
npm create vite@latest my-app -- --template react
# yarn
yarn create vite my-app --template react
# pnpm
pnpm create vite my-app --template react
# bun
bun create vite my-app --template react
다음 글은 CRA 프로젝트를 Vite로 마이그레이션하는 방법에 대해 알아보자.
