React 개발 도구 Vite

Vite란?

---

Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷하다)는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

• 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공 ( Hot Module Replacement (HMR)등)
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 제공 (높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다)

Vite는 아래 항목들을 지원합니다.

• Dependency 사전 번들링 및 캐싱
• 네이티브 ESM
• Hot Module Replacetment
• Typescript
• jsx, tsx
• 기타 등등

React에서 CRA 대신 Vite 사용을 권장한다고 합니다.

 

Vite를 사용해야 하는 이유

---

문제점

기존 Webpack, Rollup, Parcel과 같은 도구로 인한 번들링 작업을 통해 프런트엔드 개발자의 생산성을 크게 향상시켰습니다, 하지만 발전에 따라 처리해야 하는 모듈의 수가 늘어나 병목 현상이 발생하는 문제점을 가지게 되었습니다.

그 결과 오랜 시간을 대기하거나 HMR을 사용하더라도 변경된 파일의 적용까지 수 초 이상 대기해야 했습니다.

 

이러한 문제점에 초점을 맞춰 Vite는 브라우저에서 지원하는 ES modules(ESM) 및 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하고자 했습니다.

 

긴 서버 구동 시간 해결

콜드 스타트 방식으로 개발 서버 구동시의 긴 구동시간을 개선하기 위해 Vite는 애플리케이션의 모듈을 Dependencies, Source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선합니다.

Cold start(콜드 스타트) : 프로그램 측면에서 데이터가 없는 상태, 최초 실행으로 캐싱된 데이터가 없는 경우

• Dependencies : 개발 시 그 내용이 바뀌지 않을 일반적인(Plain) JS 소스코드, 기존 번들러는 많은 양의 JS 모듈을 가진 경우 매우 큰 Dependencies에 대한 번들링 과정이 매우 비효율적으로 많은 시간을 필요로 했습니다.
  Vite의 사전 번들링 기능은 EsBuild를 사용하고 있습니다. Go로 작성된 Esbuild는 기존 Webpack, Parcel등과 같은 기존 번들러 대비 10~100배 빠른 속도를 제공합니다.
• Source Code : JSX, CSS 및 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정이 매우 잦은 Non-plain JS 소스 코드는 Vite에서 Native ESM을 이용해 소스 코드를 제공합니다.
  이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 합니다. Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 됩니다. 

느린 소스 코드 갱신 해결

기존 번들러 기반의 개발을 진행할 때, 소스 코드를 업데이트 하면 번들링 과정을 다시 거쳐야 했었습니다. 따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 됩니다.

기존 번들러는 "모든 파일"을 번들링 하고 이를 다시 웹 페이지에서 불러오는 비효율적인 작업을 진행했습니다.

이러한 이슈를 우회하고자 HMR(Hot Module Replacement)이라는 대안이나왔으나 이 역시 명확한 해답이 되지 못했습니다.

물론 Vite는 HMR을 지원하지만 이는 번들러가 아닌 ESM을 이용하는 것으로 어떤 모듈이 수정되면 Vite는 수정된 모듈과 관련된 부분만 교체합니다.

전 과정에서 완벽하게 ESM을 이용하기에 앱 사이즈가 커져도 HMR을 포함한 갱신 시간에는 영향을 끼치지 않습니다.

또한 Vite는 HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높입니다. 필요에 따라 304 Not Modified로 Dependencies는 Cache-Control: max-age=31536000,immutable을 이용해 캐시됩니다.

해당 방법으로 요청 횟수를 최소화하여 페이지 로딩을 빠르게 만들어 줍니다.

 

 

Vite vs CRA(Create React App) 

---

Vite와 CRA는 모두 프론트 엔드 개발 환경 구성을 위한 도구로 각각의 장단점이 존재합니다.

더 빠른 것은 *로 표시하도록 하겠습니다.

 

개발 서버 구동 시간

• *Vite : Dependencies, Source code 카테고리 분리 
• CRA : Webpack

모듈 번들링

• *Vite : ESM
• CRA : Webpack

빌드 속도

• *Vite : Rollup, ESBuild 등
• CRA : Webpack, Babel, ESLint 등

환경 설정

• Vite : 초기 설정 필요
• *CRA : 설정이 미리 구성

이렇듯 Vite가 전체적으로 더 빠르지만 CRA는 초기 설정이 간단해 바로 사용할 수 있다는 장점이 있습니다.

원하는 방식에 따라 사용하면 될 듯 합니다.

 

참조 사이트

---

https://ko.vitejs.dev/guide/

Vite

https://ko.vitejs.dev/guide/features

Vite

https://ko.vitejs.dev/guide/why.html

Vite