Vite란
date
Sep 11, 2022
slug
vite
status
Published
tags
Vite
summary
type
Post
시작하며
회사에 입사한 후 겪은 가장 큰 변화 중 하나는 기술 스택의 변화였습니다. 회사의 프로젝트들은 대체로 Vue와 Webpack, 또는 Vue와 Vite를 주요 기술로 활용하고 있었는데, 현재는 Vue와 Vite를 중심으로 기술 스택을 마이그레이션하고 있습니다. 이전에는 주로 React와 Webpack을 사용했던 저에게, 회사에서의 Vue와 Vite의 사용은 새로운 경험을 제공했습니다.
Vite에 대한 첫인상은 그 시작 속도와 빌드 속도의 빠름에 있어서 매우 인상적이었습니다. 공식 문서를 참고하여 Vite에 대해 학습했고 그 과정을 소개하겠습니다.
Vite
Vite는 빠른 개발 속도와 모던한 웹 개발 환경을 제공하는 빌드 도구입니다.
Vite의 탄생 배경
브라우저에서 ES Module을 지원하기 전까지 JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 따라서 개발자는 소스 모듈을 브라우저에서 실행할 수 있는 파일로 처리하기 위해 번들링이라는 우회적인 방법을 사용해야 했습니다.
Webpack, Rollup 같은 도구는 이런 번들링 작업을 진행해줌으로써 프론트엔드 개발자의 생산성을 크게 향상시켰습니다.
Webpack은 자바스크립트 모듈의 의존관계를 파악하고 실행할 때 필요한 모듈을 로딩해주는 역할을 합니다. 그러나 단일 Webpack 빌드에 포함되었던 모듈만 처리하므로 다른 Webpack 빌드에 포함된 모듈, 여러 서버에 배포되어 있는 원격 모듈을 하나의 애플리케이션에서 로딩할 수 없었습니다.
하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있습니다.
이러한 상황에서 JavaScript 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비 합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상 소요되곤 했습니다.
Vite의 해결 방법
Vite는 두가지
dependencies와 source code 두가지 카테고리로 나누어 개발 서버를 시작하도록 함으로써 해결했습니다.dependencies는 개발 시 그 내용이 바뀌지 않은 Javascript 소스 코드입니다.기존 번들로는 컴퓨넌트와 같이 몇 백개의 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었고 많은 시간을 필요로 했습니다. 이러한 과정을 Vite는 사전 번들링을 통해 해결했습니다. Vite의 사전 번들링 기능은 기존의 번들러 대비 10-100배 빠른 Esbuild를 사용하고 있습니다.
source code는 컴포넌트와 같이 컴파일링이 필요하고 수정 또한 매우잦은 Javascript 소스 코드입니다.Vite는 Native ESM을 이용해 소스코드를 제공합니다. 즉, 브라우저가 곧 번들러라는 것으로 Vite는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스코드를 요청하면 이를 전달할 뿐입니다.
배포시 번들링 과정이 필요한 이유
이제 기본적으로 ESM이 대부분의 환경에서 지원되지만, 프로덕션 환경에서 최적의 로딩 성능을 얻으려면 트리 셰이킹, 지연 로딩 및 청크 파일 분할을 이용하여 번들링 하는 것이 더 좋습니다.
번들링시에는 Esbuild를 사용하지 않는 이유
Esbuild는 굉장히 빠른 속도로 번들링이 가능하다는 장점이 있으나, 번들링에 필수적으로 요구되는 기능인코드 분할(Code-splitting)및CSS와 관련된 처리가 아직 미비합니다. Vite에서 사용중인 Rollup은 이에 대해 조금 더 검증되었고 유연한 처리가 가능하게끔 구현되어 있기에 현재로서는 이를 사용하고 있으며, 향후 Esbuild가 안정화 되었을 때 어떤 프로덕션 번들링 도구가 적절할 것인지 다시 논의할 예정입니다.
실제로 ESbuild 로드맵을 살펴 보시면 Code Splitting 같은 이슈들을 처리하기 위해 진행중이라고 합니다.
마치며
이 과정을 통해 Vite는 기존의 빌드도구와 어떻게 다른지, 그리고 이러한 차이가 실제 개발 과정에 어떤 영향을 미치는지 에 대해 알게되었습니다. 이 글이 Vite를 이해하는데 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
