Vite는 왜 생기게 되었나?
프론트엔드 개발에는 JavaScript 모듈화가 필요한데, 브라우저가 ES Modules (ESM)을 지원하기 전까지는 이를 위해 번들링이라는 방법을 사용했어요. 번들링은 JavaScript의 소스 모듈을 브라우저에서 실행할 수 있는 파일로 변환하는 작업을 말해요. Webpack, Rollup, Parcel과 같은 도구들이 이 작업을 해주면서 프론트엔드 개발자들의 작업 효율을 높여주었어요.
그런데 웹 애플리케이션의 복잡성이 증가하면서, 처리해야 할 JavaScript 모듈의 개수도 많아졌어요. 수천 개의 모듈이 있는 대규모 프로젝트에서는 JavaScript 기반의 도구를 사용하다보면 성능 병목이 발생해요. 개발 서버를 가동하는 데 오래 걸리거나, 파일 변경이 적용되는 데까지 수 초 이상 소요되는 등의 문제가 생겨나죠. 이런 느린 피드백 루프는 개발자의 생산성을 저하시키는 요인이 됩니다.
이러한 문제점들을 해결하기 위해 Vite라는 도구가 탄생했어요. Vite는 브라우저에서 지원하는 ES Modules (ESM)와 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하려고 했죠. 예를 들어, 서버 구동 시간을 줄이기 위해 애플리케이션의 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 관리하고, Go 언어로 작성된 Esbuild를 활용해 번들링 과정을 빠르게 진행합니다. 또한, 소스 코드 변경 시 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하므로, 특정 시점에서 필요한 코드만 불러오게 됩니다. 이러한 방식으로 Vite는 개발 효율성을 높이는 데 큰 도움을 줍니다.
Vite란?
Vite는 프랑스어로 '빠른'을 의미하며, 그 이름답게 빠른 개발 및 빌드 시간을 주요 목표로 합니다. Vite의 핵심 기능은 두 가지입니다.
-
빠른 새로고침: Vite는 Vue, React, Preact, LitElement 등과 같은 모던 프레임워크를 지원하며, 변경사항을 저장할 때마다 전체 페이지를 새로 고치는 대신 변경된 모듈만을 즉시 업데이트합니다. 이로 인해 개발자가 코드 변경사항을 더 빠르게 확인할 수 있습니다.
-
빠른 빌드 시간: Vite는 빌드 시 Rollup을 사용합니다. Rollup은 코드를 한 번에 번들링하므로, Webpack 같은 기존 번들러에 비해 더 빠른 빌드 시간을 달성합니다.
Vite는 또한 ES Modules(ESM)를 기반으로 합니다. 이는 브라우저가 필요한 모듈만 요청하도록 만들어 애플리케이션의 로딩 시간을 크게 줄여주는 중요한 장점을 제공합니다.
