Vite를 사용하는 이유

Vite를 사용하는 이유는 빠른 개발 환경과 효율적인 프로덕션 빌드 때문이다.

 

 

빠른 서버 구동: esbuild로 사전 번들링, Native ESM을 통한 동적 Import

출처: https://esbuild.github.io

Vite는 사전 번들링(pre-bundling)을 webpack과 비교했을 때 속도가 10~100배나 빠른 esbuild를 사용하고 있다.

사전 번들링이란 사이트를 로컬로 로드하기 전에 프로젝트 dependencies를 미리 번들로 제공하는 것을 말한다.

출처:https://vitejs.dev/guide/why.html

우리가 npm run dev 혹은 yarn dev를 입력하면, 프로젝트 전체의 모든 소스 코드들을 하나의 파일로 빌드하는 과정을 거치게 된다.  서버 실행 전에 브라우저가 이해할 수 있도록 파일들을 변환하는 과정을 거쳐야만 서버를 띄울 수가 있다. 그래서 프로젝트 규모가 클수록, 관계가 복잡할수록 개발 서버 실행 시간이 길어지게 된다. 

출처:https://vitejs.dev/guide/why.html

Vite는 Native ESM(ECMAScript Module)을 적극 사용한다. 

ESM은 ES6에 도입된 자바스크립트 공식 모듈로, 다음과 같은 특징이 있다.

1. Live Binding: CommonJS는 모듈에서 내보낸 값의 복사본을 제공하기 때문에 내보낸 값을 변경해도 다른 모듈에서는 변경되지 않는 반면, ESM은 어떤 모듈에서 값을 변경하면 그 모듈을 import한 다른 모듈에서도 그 변화가 반영된다.
2. Asynchronous Loading(비동기 로딩): ESM은 Static Import(정적)와 Dynamic Import(동적) 두 가지 방식을 제공한다. 정적 import는 import 키워드를 사용하여 코드 분석 시점에 모듈 경로를 알 수 있고, 코드 실행 전에 모든 종속성이 로드되어야 한다. 반면, 동적 import는 import() 함수를 사용하여 실행 시점에 모듈을 불러올 수 있으며, 코드 어디에서나 사용할 수 있다. 조건에 따라 다른 모듈을 불러올 수 있게 해주며 Promise를 반환하므로 비동기 로딩이 가능하다. 이런 방식은 여러 모듈을 동시에 불러올 수 있게 하여 웹 페이지의 응답성이 좋아지고, 로딩 시간을 줄이는 데에 도움이 된다.
3. Tree Shaking: 빌드 시에 사용되지 않는 코드를 제거하는 최적화 기법을 사용할 수 있다. 

Vite는 ESM의 동적 Import 기능을 활용해 필요한 모듈만 로드한다. 그래서 초기 로드 시점에 모든 코드를 번들링하지 않아도 되고, 코드가 수정됐을 시에는 해당 파일만 재컴파일하면 되므로 서버 실행 시간을 크게 단축할 수 있다.

 

 

빠른 소스 코드 갱신: ESM을 통한 HMR 지원과 HTTP Header를 이용한 캐시 기능

이 ESM을 통해 HMR(Hot Module Replacement)이 가능해져, 변경된 모듈만 브라우저로 다시 전송되기 때문에 전체 페이지를 새로 고침할 필요 없이 변경 사항을 실시간으로 확인할 수 있다. 따라서 코드를 실시간으로 테스트하고 디버깅하는 과정이 더욱 빠르고 효과적일 수 있게 된다.

또한 Vite는 HTTP Header를 이용해서 네트워크 대역폭을 절약하고 페이지 로딩 속도를 높인다.

공식 문서에서는 아래와 같은 헤더를 언급하고 있다.

1. 304 Not Modified: 이 응답은 이전에 브라우저가 받은 자원의 복사본을 캐시(저장)해두고, 그 자원이 변하지 않았다는 것을 서버가 알려주는 것이다. 이 경우 브라우저는 캐시 된 복사본을 재사용하므로 네트워크를 통해 동일한 자원을 다시 다운로드할 필요가 없다.
2. Cache-Control Header: 이 헤더는 브라우저에게 자원을 얼마 동안 캐시해야 하는지, 그리고 캐시된 자원을 어떻게 처리해야 하는지 알려준다. 예를 들어 max-age=31536000,immutable은 브라우저에게 해당 자원을 1년 동안 캐시하라고 알려주고, 해당 자원이 절대로 변하지 않을 것임을 알려준다. 이렇게 함으로써, 브라우저는 해당 자원이 변경되지 않았음을 확신할 수 있고 재검증(revalidation) 요청을 보낼 필요가 없어진다.

 

 

 

 

 

 

참고 문서

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

Vite

https://yozm.wishket.com/magazine/detail/1620/

Vite 이야기(feat. Svelte) | 요즘IT