vite는 무엇인가

인트로

Vite는 프랑스어로 빠르다는 것을 의미한다. 빠르고 간결한 모덥 웹 프로젝트 개발을 목적으로 탄생한 빌드 도구이다.

핵심 컨셉은 두가지 이다.

• 네이티브 ES Module을 넘어 다양한 기능을 제공한다.
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다.
  • 최적화된 정적 리소스들을 배포할 수 있게끔 하고, 미리 정의된 설정을 제공한다.

왜 Vite를 사용해야 할까?

브라우저에서 ES Modules를 지원하기 전가지, javascript 모듈화를 네이티브 레벨에서 진행할 수 없었다.
개발자들은 그래서 어쩔 수 없이 우회적인 방법인 번들링을 사용할 수 밖에 없었다.

모듈화된 소스 코드를 브라우저에서 실행 할 수 있게 파일로 한데 묶어 연결해주는 작업을 걸쳐야 했단 것이다.

하지만 애플리케이션이 커지면서 모듈도 커졌고, 대규모 프로젝트에서 javascript 기반의 툴의 성능 병목 현상이 발생했다.
개발 서버 가동하는데 너무 오래 기다리게 되는 등이 문제가 발생했는데 이는 당연히 생산성에 좋지 않다.
(애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야만 실제 페이지를 제공했었으니깐…)

Vite의 혁신

Vite는 이를 dependencies 그리고 source code 두 가지 카테고리로 나누어 개발 서버를 시작하도록 함으로써 문제를 해결 하였다.

Dependencies

Dependencies는 개발 시 그 내용이 바뀌지 않을 소스 코드를 의미한다.
기존의 번들로러는 컴포넌트 라이브러리와 같이 몇 백개의 모듈을 갖고 있는 경우, 번들링 과정이 매우 비효율적이고 많은 시간을 필요로 한다.

Vite는 이를 사전 번들링 기능을 통해 해결했다. 기존 번들러 대비 10-100배 빠른 번들링 속도를 보였다

Source code

Dependencies와 반대로 수정이 잦은 코드의 경우는 어떻게 해야 할가?
Vite는 Native ESM을 이용해 소스 코드를 제공하도록 한다.
즉 브라우저가 번들러가 되어서, 브라우저가 판단해서 이를 전달하기만 한다.

즉 아래 사진처럼 요청이 오면 필요한 데이터만 보내니까 효율적인거다!

마치며

Docs를 보면 결국은 기존의 빌드 도구보다 빠르니깐 사용하란 말이다.
위에 기술한 것 외에도 http 헤더를 이용해서 퍼포먼스를 높이거나, EsBuild 이전 등을 고려하고 있는 것을 보면 점점 발전할 것이 기대 된다.