Vite?
vite
vite를 사용하는 이유?
vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 피드백 속도가 엄청나게 개선되기 때문입니다.
브라우저에서 ES Module 사용할 수 있기 전에는 모듈화 된 방식으로 자바스크립트를 작성하는 native 메커니즘이 없었다.
그래서 번들링이 필요했고, Weppack, Rollup, Parcel 등의 도구로 번들링을 해결했다.
하지만 더 큰 앱을 위해 더 많은 자바스크립트 사용 및 엄청나게 많은 모듈들이 사용되었고,
성능 병목 현상, 느린 서버 가동 속도, 느린 HMR로 파일 편집 반영속도가 느려지게 되었다.
이를 해결하기 위해 vite를 사용하는 것이다.
Vite의 가장 큰 특징
Dev Server에서 Native ESM를 사용하여 소스를 제공한다는 점이다.
Webpack과 같은 기존의 번들 기반 방식에서는 모든 소스 코드가 빌드되어 한번에 번들링된 형태로 서비스를 제공했다면, Native ESM 기반 방식에서는 그럴 필요가 없다. 번들링이 필요가 없고 브라우저에서 필요한 모듈의 소스 코드를 import할 때 전달만 하면 되는 방식이다.
Vite는 개발 시 내용이 자주 바뀌지 않는 의존성 모듈(Dependencies)모듈을 사전 번들링하는데 esbuild를 사용한다. esbuild는 Go 언어로 만들어졌으며 다른 자바스크립트 기반의 번들러보다 10~100배 빠른 속도를 가지고 있는 번들러이다.
번들 기반 개발 서버
Native ESM 기반 개발 서버
- ESM
1
2
import a from "./a";
export default { a, b: 2 };
- CommonJS
1
2
const a = require("./a");
moudule.exports = { a, b: 2 };
HMR (Hot Module Replacement) 지원
개발하면서 소스 코드를 수정하면 수정된 모듈과 관련된 부분만 교체하고 브라우저에 전달한다. Native ESM을 이용하기 때문에 프로젝트 사이즈가 크더라도 HMR 시간에 영향을 주지 않아서 매우 빠르게 진행이 된다.
3. 타입스크립트 트랜스파일링 속도
vite를 이용하면 기본적으로 타입스크립트 사용을 지원하며, esbuild를 사용해서 transpiling을 하기 때문에 훨씬 빠른 속도로 할 수 있다. 하지만 에디터 내에 다른 것들이 타입 체킹을 하기 때문에 vite는 별도의 타입 체크 기능을 제공하지 않는다.
CRA와 VITE 비교하기
| 구분 | vite | CRA |
|---|---|---|
| 수행 | npx create-react-app 했을 때 | npm init vite와모듈 설치 npm install 명령어 실행했을 때 |
| 설치 시간 | 약 1분 40초 | 약 30초 |
| 파일 사이즈 | 221MB | 45MB |
| 빌드 파일 사이즈 | 533KB | 150KB |
| 안정성, 호환성 | 검증 완료 | 검증하는 시간이 필요 |
참고
- ([Vue + Vite] 근데 Vite는 뭔가요?)[https://analogcode.tistory.com/39]
- 패스트캠퍼스 강의