[Vite + React] Vite란?

Vite

프랑스어로 “빠르다”라는 뜻의 단어 veet로 읽는다

Vite를 사용하는 이유

이름처럼 빌드와 서버 구동이 빠르다. 기존의 webpack, rollup 등의 빌드 도구는 javascript로 만들어져있고, 번들러 기반으로 되어있어 서비스가 커지면 커질수록 소스 코드 갱신 시간이 선형적으로 증가하게 된다. 일부 번들러는 메모리에서 작업을 수행하여 갱신이 필요한 파일만 새롭게 번들링 하도록 했지만, 결국 처음에는 “모든 파일”에 대한 번들링이 필요했다.

vite가 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 사용한다. 빌드 시 번들러가 아닌 ESM을 이용하여 어떤 모듈이 수정되면 vite는 그 수정된 모듈과 관련된 부분만 교체한다. 따라서 서비스가 아무리 커져도 소스 코드 갱신 시간에 큰 영향을 끼치지 않는다. 또한 HTTP헤더를 활용하여 페이지를 로드한다. 필요에 따라 소스 코드는 304 Modified로, 디펜던시는 Cache-Control immutable을 이용해 캐시된다. 이런 방식으로 요청을 최소화 하여 페이지 로딩을 빠르게 한다.

→ Webpack, Parcel등과 비교하면 10배 이상의 속도를 낸다고 하네요,,?!

서버 구동이 왜 빠른가

개발 서버를 이용할 때 webpack과 같은 모듈 번들러를 이용하면, 모듈 번들링이 모두 끝난 후에 서버를 구동하여 시간이 오래 걸렸다.

그러나 vite는 native ESM이라는 자체적 모듈 기능을 사용해 해결했다. 브라우저가 요청하는 모듈을 브라우저에게 전송한 후, 모듈 번들링을 브라우저가 수행한다. 그래서 서버 구동이 빠른 것!

 

 

 

참조

https://velog.io/@homile/react-vite

https://despiteallthat.tistory.com/256