김민태의 데브캠프 2기 - vite에 대해 알아보자

반가워요 Vite!

 

이번주 강의시간에는 React를 활용한 포켓몬도감 사이트를 만들어 볼것이다.

여기서, vite를 사용하는데 이것에 대해 자세히 알아보자.

 

vite란..?

장점 : 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선

점점 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 js의 양이 기하급수적으로 늘엉나기 시작,
그에 따라 js 기반 도구에 대한 성능 병목 현상이 발생하기 시작했다.
이것은, 브라우저에서 느린 피드백 루프로 개발자의 생산성과 행복에 큰 영향을 끼쳤다.

 

 

그래서 개발자들은 Vite를 이용해서 속도 개선을 하고자 했는데,

개발 서버를 스타트할 대 번들러 기반 빌드 설정은 서비스를 제공하기 전에 전체 애플리케이션을 엸힘히 크롤링하고 빌드해야  한다.

출처 - 김김태의 데브캠프 강의

 

1. 느린 서버 시작 속도

Vite는 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누어 개발 서버 시작 시간을 개선한다.

a. 종속성 : 대부분 개발 중에 자주 변경되지 않는 일반 JS로, 일부 큰 종속성(ex 수백 개의 모듈이 있는 구성 요소 라이브러리)도 처리하는데 비용이 많이든다. 종속성은 다양한 모듈 변수(ex ESM 또는 CommonJS)로 제공할 수 있다.

Vite는 esbuild를 사룡하여 종속성을 사전 번로 제공하고, Go로 작성되어 있어 JS기반 번들러보다 10~100배 빠르게 종속성을 사전 번들링한다.

 

b. 소스코드에는 변환이 필요한 일반 JS가 아닌 경우가 많고(ex JSX, CSS, Vue/Svelte 구성요소) 매우 자주 편집되고 모든 소스 코드를 동시에 로드할 필요가 없다(ex 경로 기반 코드 분할)

 

Vite는 기본 ESM을 통해 소스 코드를 제공하여 본질적으로 브라우저가 번들러 작업의 일부를 인계받는다.

Vite는 브라우저가 요청할 때 요청에 따라 소스 코드를 변호나하고 제공하기만 하면 된다.

즉, 조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리한다.

 

 

2 . 느린 서버 업데이트 속도

 

번들러 기반 빌드 설정에서 파일을 편집할 때 전체 번들을 다시 빌드하는것은 비효율 적이다

왜냐하면 업데이트 속도는 앱 크기에 따라 선형적으로 저하되기 떄문이다.

일부 번들러에서 개발 서버는 파일이 변경될 때 모듈 그래프의 일부만 무효화하면 되지만 전체 번들을 다시 구성하고 웹 페이지를 다시 로드하는 절차를 메모리에서 번들링을 실행한다.

번들을 재구성하는데 비요이 많이 들 수 있으며 페이지를 다시 로드하면 애플리케이션의 현재 상태가 손상된다.

이것이 일부 번들러가 핫 모듈 교체(HMR)를 지원하는 이유이다.

HTR을 통해 페이지의 나머지 부분에 영향을 주지않고 모듈 자체를 Hot Module Replacement할 수 잉ㅆ다.

익서은 DX(developer experience)를 크게 향상시키지만, 실제로 HMR 업데이트 속도도 응용 프로그램의 크기에 증가에 따라 크게 저하된다는 것을 발견했다.

 

그렇다면 HMR에 대해 자세히 알아보자 

 

HMR(Hot Module Replace)란?

파일을 편집할 때 전체 번들을 다시 빌드하는 것이 아닌 페이지의 나머지 부분에 영향을 주지 않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는것

 

Vite에서 HMR은 기본 ESM을 통해 수행된다. 파일이 편집될 때 Vite는 편집된 모듈과 가장  가까운 HMR 경계(대부분의 경우 모듈 자체만) 사이의 체인을 정호가하게 무효화하면 애플리케이션의 크기에 관계없이 HMR 업데이트가 일관되게 빨라진다.

 

Typescript Transpliling ( 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것 )속도

 

Vite를 이용하면 기본적으로 Typescript 사용을 지원하며, esbuild를 이용해서 transpiling하기 때문에 더 빠른 속도로 할 수 있지만 Type checking 기능은 없지만 다른 에디터에서 지원하므로..ranspiling만 제공한다.