Vite #1

📢이글은 Vite 가이드를 보고 개인 공부를 위해 정리한 글입니다. 

Vite

 

Vite  /vit/

 

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구

• Native ES Module을 넘은 다양한 기능 제공 (ex. Hot Module Replacement)
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용 가능
• 높은 수준으로 최적화된 Static Resource 를 배포할 수 있게 하며, Pre-configured를 제공

기본적으로 최적화 된 설정 제공.

Plugin API 또는 JavaScript API 사용가능 ( + TypeScript 지원 )

 

---

 

왜 Vite인가 ?

브라우저에서 ES Module 을 지원하기 전 까지, JavaScript Module 화를 Native Level 에서 진행할 수 밖에 없었음.

기존 사용자들은 Bundling을 통한 우회적인 방법을 사용. ( Webpack, Rollup, Parcel… 등 도구를 이용하여 번들링 작업 진행 )

 

 

Bundling?

모듈화 된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업

 

 

어플리케이션의 발전에 따라 처리하는 JavaScript 모듈수가 극적으로 증가.

JavaScript 기반의 도구는 성능 병목 현상이 발생.

종종 개발 서버를 가동하는데 시간이 비합리적으로 오래 걸리고 HMR을 이용하더라도 변경된 파일 적용까지 수 초 이상 소요.

브라우저에서 지원하는 ES Module 및 Native Language로 작성된 JavaScript 도구 등을 활용해 문제를 해결하기 위해 생성.

 

---

 

Cold-Start 방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업이 끝나야만 실제 페이지를 제공할 수 있었음.

(* 콜드-스타트: 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미)

 

 

Vite는 dependencies와 source code로 카테고리를 나누어 개발 서버를 시작하여 해당 문제를 해결.

• Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인(Plain) JavaScript 소스 코드입니다. 기존 번들러로는 컴포넌트 라이브러리와 같이 몇 백 개의 JavaScript 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었고 많은 시간을 필요로 했습니다.
  Vite의 사전 번들링 기능은 **Esbuild**를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 번들링 속도를 보였죠.
  
  
• Source code: JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드는 어떻게 할까요? (물론 이들 역시 특정 시점에서 모두 불러올 필요는 없습니다.)
  
  

Vite는 Native ESM을 이용하여 소스 코드를 제공 : 브라우저가 번들러 역할을 함.

조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용이 되어야만 처리.

(브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달)

 

 

---

 

기존 번들러 기반의 개발은 소스 코드를 업데이트 할 때마다 번들링 과정을 다시 거쳐야 했음.

서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가.

 

일부 번들러는 실제로 갱신에 영향을 받는 파일만 새로 번들링하게 하였으나, 이 또한 처음에는 “모든 파일”에 대한 번들링을 진행해야 했었음.

이것에 대안으로 HMR을 사용했으나 명확하게 문제를 해결하진 못함.

(* HMR: 앱을 종료하지 않고 갱신된 파일만을 교체하는(Replacement) 방식. 다만 마찬가지로 앱 사이즈가 커질수록 선형적으로 갱신에 필요한 시간이 증가한다.)

 

물론 Vite도 HMR을 지원하지만, 번들러가 아닌 ESM을 이용하여 지원한다.

 

특정 모듈이 수정되면 Vite는 수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐임.

전 과정에서 완벽히 ESM을 이용하기 때문에 앱 크기가 커져도 HMR을 포함한 갱신 시간에는 영향이 없음.

 

또한 HTTP 헤더를 이용하여 소스코드는 304 Not Modified로 dependency는 ache-Control: max-age=31536000,immutable 을 이용하여 캐시되도록 함으로써, 요청을 최소화하여 퍼포먼스를 한단계 높임.