• 참고: Vite를 사용해야 하는 이유, [Vue + Vite] 근데 Vite는 뭔가요?
  

---

Vite(비트)란?

네이티브 자바스크립트 모듈(ES Modul)을 기반으로 한 데브 서버

이전에 브라우저는 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 기법을 사용하여 JavaScript 모듈화를 진행했었다.

• Webpack, Rollup, Parcel 과 같은 도구들이 이런 번들링 작업을 유용하게 해줬음.
  웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어있었다. 하지만 비트는 웹팩보다 훨씬 더 빠르게 개발하고 배포할 수 있도록 도와준다.

하지만 애플리케이션 기술이 점점 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수 또한 극적으로 증가했기 때문에 수천 개의 모듈이 존재하는 대규모 프로젝트에서 JavaScript 기반의 도구는 성능 병목 현상(두 구성 요소의 최대 성능의 차이로 인해 한 구성 요소가 다른 하드웨어의 잠재 성능을 제한하는 현상) 이 발생하였고, 개발 서버를 가동하거나 변경된 파일이 적용될 때까지 시간이 오래 걸린다는 비효율성 문제가 대두되기 시작했다.
=> Vite 는 이러한 문제점에 초점을 두고 해결하고자 함.
(Vite이 사용하는 사전 번들링 기능 Esbuild - 속도 차이 비교해보기)

Vite는 프론트엔드 개발을 위한 툴이자 Vue CLI를 대체하기 위한 툴이기에 Vue3을 사용하기 위해서는 Vite가 무엇인지 필히 알고 넘어가야 한다.

🧞‍♂️ Vite는 애플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선시켰다.

1. dependencies : 개발 시 내용이 바뀌지 않을 플레인(plain) JavaScript 소스 코드
2. source code : JSX, CSS, Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정 또한 매우 잦은 논플레인(non-plain) JavaScript 소스 코드

🧞‍♂️ Vite는 브라우저가 번들러의 작업을 일부 차지할 수 있도록 하는 Native ESM을 이용해 소스 코드를 제공한다.

기존의 번들러 기반으로 개발을 진행할 경우에는 소스 코드를 업데이트할 때마다 번들링 과정을 다시 거쳐야 했다. 따라서 서비스가 커질수록 소스코드 갱신 시간 또한 선형적으로 증가하게 되는 것.
➡️ "모든 파일"을 번들링하고, 이를 다시 웹페이지에서 불러오는 것은 매우 비효율적으로 다가옴.
➡️ 이러한 이슈를 우회하고자 HMR(Hot Module Replacement)이라는 대안이 나왔으나, 이 역시 명확한 해답이 되지는 못했음. (참고로, vite 역시 HMR를 지원하나, 번들러가 아닌 ESM을 이용함.)

🧞‍♂️ Vite는 HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높인다.

필요에 따라 소스 코드는 304 Not Modified로, 디펜던시는 Cache-Control: max-age=31536000,immutable을 이용해 캐시됨.
➡️ 이렇게 함으로써 요청 횟수를 최소화하여 페이지 로딩을 빠르게 만들어준다.

종합적으로 따져보았을 때, 프론트엔드 개발은 소스코드를 실시간으로 갱신하면서 브라우저로 테스트를 해봐야 하기 때문에 Dev Server의 속도가 곧 개발환경의 속도라고 할 수 있다. 그래서 기존의 Webpack 기반의 환경에서는 프로젝트가 커질수록 구동시간과 HMR 시간이 느려지게 되기 때문에 낭비가 되는 것이다. 이러한 이유들로 인해 Vite에서는 Native ESM과 ebsuild를 이용하여 빠르게 동작하도록 만드는데 중점을 둔 것이다.
-> 프론트엔드 개발에 생산력을 크게 향상시킬 수 있으며, 프론트엔드 개발 툴이 추구하는 방향인 셈.