Vite 란?
Vite(프랑스어로 "빠르다(Quick)")를 의미하며, 발음은 "veet"와 비슷한..
프랑스어로 "빠르다"를 의미, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구.
- 개발 시 네이티브 ES Module 을 넘어 더욱 다양한 기능을 제공한다.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있고, Pre-configured 을 제공한다.
왜 Create React App 대신 Vite일까?
이 질문을 하기전에 JavaScript 에는 module이 없다는 사실을 아는가?
JS 는 module이 없는 채로 나왔는데, 웹에서 JS로 대형 어플리케이션을 만들거라는 생각을 못했다. 아주 간단한 동작만 하기 위한 목적을 가지고 태어났기에 파일을 여러개로 만들어서 개발 할 수가 없다.
파일을 여러개로 분리할 수 없다면 거대한 프로그램을 작성하는데에는 불리한데, 하나의 파일에서 여러명에게 몇만 몇십만이 되는 아주 거대한 코드를 작성한다고 생각을 한다면 모듈 없이는 프로그램의 덩치를 키우기 힘들다
프로젝트 초기 단계에서는 JS 모듈의 크기와 개수는 큰 문제 없이 보이지만, 더 많은 코드를 작성하고 프로젝트 규모가 커진다면 개발 서버가 느려지는 것을 경험할 수 있다.
왜? 개발 서버를 실행하기 위해서는 코드를 변환하고 브라우저에서 로드할 수 있는 방식으로 코드를 연결해야 하기 때문이다.
느린 피드백이 반복이 되면 개발자의 생산성과 만족도는 낮아질 수 밖에 없다.
Vite 는 이러한 이슈를 브라우저에서의 네이티브 ES모듈 사용, 그리고 complite-to-native 언어로 작성된 JS 도구와 같은 생태계의 새로은 기술을 이용하여 해결하는 것을 목표로 한다.
번들의 두가지 부분으로 분류
- 외부 의존성(벤더 코드): 외부 의존성은 대부분 개발하는 동안 바뀌지 않는 일반적인 JS이다.
Vite는 esbuild를 이용하여 외부 의존성을 미리 번들링한다. esbuild는 JS기반의 번들러보다 10~100배 빠르게 의존성들을 미리 번들링한다. - 내부 프로젝트 코드(ES모듈): Vite는 네이티브 ESM(ES Module)을 통해 소스 코드를 제공, 이는 본질적으로 브라우저에 번들러 작업 일부를 인계하는 것. Vite는 브라우저 요청 시마다 소스코드를 변환하고 제공하기만 하면 된다.
Vite는 당신이 로컬에서 개발을 진행하는 동안 기본적으로 ES6 모듈을 지원하는 최신 브라우저를 사용한다는 가정한다.
이는 본질적으로 서버가 시작되기 전에 코드를 번들링하는 데 시간을 소비하지 않는 것을 의미한다.
그러면 왜 프로덕션을 이한 번들링을 진행할까?
- 대부분 브라우저가 기본적으로 ES 모듈 로딩을 지원, 모든 유저가 최신 브라우저를 사용하는게 아니라면 여전히 번들링이 필요
- 번들링을 하지 않는다면, 여러 모듈을 가져오기 위해서 매우 많은 네트워크 요청이 필요하게 된다.
프로덕션 레벨에서의 최적화된 로딩 성능을 얻기 위해서는 트리쉐이킹(tree-shaking), 지연로딩(lazy loading) 그리고 더 나은 캐싱을 위한 청크스플리팅(Chunk splitting)을 이용하여 코드를 번들링하는 것이 좋다.
