vite란?
vite를 사용하는 이유
vite 의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을때의 반영 속도 같은 Feedback 속도의 엄청난 개선입니다.
브라우저에서 ES 모듈을 사용할 수 있기 전에는 개발자에게 모듈화된 방식으로 JavaScript를 작성하는 기본 메커니즘이 없었습니다. 이것이 우리가 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 도구를 사용하는 "번들링"의 개념에 익숙한 이유입니다.
시간이 지남에 따라 webpack, Rollup 및 Parce|과 같은 도구를 통해 프론트엔드 개발자의 개발 경험이 크게 향상 되었습니다.
그러나 점점 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수천 개의 모듈을 포함하는 것은 드문 일이 아닙니다. JavaScript 기반 도구에 대한 성능 병목 현상이 발생하기 시작했습니다. 개발 서버를 가동하는 테 종종 부당하게 오랜 시간(때로는 최대 몇 분)이 걸릴 수 있으며 HMR을 사용하더라도 파일 편집이 반영되는 데 몇 초가 걸릴 수 있습니다. 브라우저에서 느린 피드백 루 프는 개발자의 생산성과 행복에 큰 영향을 줄 수 있습니다.
Vite는 생태계의 새로운 발전을 활용하여 이러한 문제를 해결하는 것을 목표로 합니다.
Vite를 이용해서 속도 개선을 하는 방법
개발 서버를 스타트할 때 번들러 기반 빌드 설정은 서비스를 제공하기 전에 전체 애플리케이션을 열심히 크롤링하고 빌드해야 합니다.
느린 서버 시작 속도
Vite는 먼저 애플리케이션의 모듈을 중속성과 소스 코드의 두 가지 범주로 나누어 개발 서버 시작 시간을 개선합니다.
Dependencies는 대부분 중에 자주 변경되지 않는 일반 JavaScript입니다. 일부 큰 중속성(예: 수백 개의 모듈이 있는 구성 요소 라이브러리)도 처리하는 데 비용이 많이 듭니다. 중속성은 다양한 모듈 형식(예: ESM 또는 CommonJS)으로 제공될 수도 있습니다.
Vite는 esbuild를 사용하여 중속성을 사전 번들로 제공합니다. esbuild는 Go로 작성되었으며 JavaScript 기반 번들러보다 10~100배 더 빠르게 중속성을 사전 번들링합니다.
Source Code에는 변환이 필요한 일반 JavaScript가 아닌 경우가 많으며(예: JSX, CSS 또는 Vue/Svelte 구성 요소) 매우 자주 편집됩니다. 또한 모든 소스 코드를 동시에 로드할 필요도 없습니다(예: 경로 기반 코드 분할).
Vite는 기본 ESM을 통해 소스 코드를 제공합니다. 이것은 본질적으로 브라우저가 번들링 작업의 일부를 인계받게 하는 것입니다. Vite는 브라우저가 요청할 때 요청에 따라 소스 코드를 변환하고 제공하기만 하면 됩니다. 조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.
느린 서버 업데이트 속도
번들러 기반 빌드 설정에서 파일을 편집할 때 명백한 이유로 전체 번들을 다시 빌드하는 것은 비효율적입니다. 업데이트 속도는 앱 크기에 따라 선형적으로(linearly) 저하됩니다.
일부 번들러에서 개발 서버는 파일이 변경될 때 모듈 그래프의 일부분만 무효화하면 되지만 전체 번들을 다시 구성하고 웹 페이지를 다시 로드해야 하므로 메모리에서 번들링을 실행합니다. 번들을 재구성하는 데 비용이 많이 들 수 있으며 페이지를 다시 로드하면 애플리케이션의 현재 상태가 손상됩니다. 이것이 일부 번들러가 핫 모듈 교체(HMR)를 지원하는 이유입니다. 페이지가 나머지 부분에 영향을 주지 않고 모듈 자체를 "Hot Module Replacement"할 수 있습니다. 이것은 DX(developer experience)를 크게 향상시킵니다. 그러나 실제로 HMR 업데이트 속도도 응용 프로그램의 크기가 증가함에 따라 크게 저하된다는 것을 발견했습니다.
HMR(Hot Module Replace)란?
파일을 편집할 때 전체 번들을 다시 빌드하는 것이 아닌 페이지의 나머지 부분에 영향을 주지 않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는 것.
Vite에서 HMR은 기본 ESM을 통해 수행됩니다. 파일이 편집될 때 Vite는 편집된 모듈과 가장 가까운 HMR 경계(대부분의 경우 모듈 자체) 사이의 체인을 정확하게 무효화하면 애플리케이션의 크기에 관계없이 HMR 업데이트가 일반보다 빠르게 빨라집니다.
Vite는 또한 HTTP 헤더를 활용하여 전체 페이지 다시 로드 속도를 높입니다(다시 말하지만 브라우저가 더 많은 작업을 수행하도록 합니다): 소스 코드 모듈 요청을 304 Not Modified를 통해 조건부로 이루어지며 중속성 모듈 요청은 Cache-Control: max-age=31536000, immutable을 통해 강력하게 캐시됩니다. 그래서 한 번 캐시되면 서버에 다시 도달하지 않습니다.
Typescript Transpiling 속도
Vite를 이용하면 기본적으로 Typescript 사용을 지원하며, esbuild (go로 쓰여있기 때문에 훨씬 빠릅니다)를 이용해서 transpiling 하기 때문에 훨씬 빠른 속도로 할 수 있으며, 하지만 타입 checking 기능은 없습니다. 그 이유는 이미 에디터 내에서 다른 것들이 타입 체크를 하기 때문에 transpiling 만 제공합니다.
