0. 주제 선정하게 된 배경 :
CRA랑 VITE는 같은거 아닌가?
둘다 리액트 프로젝트를 생성할때 사용하니 같은 비교군에 있다고 생각했다.
그렇지만, VITE는 빌드도구이며, CRA와 비교할 수 있는건 create-VITE라는 것이라고 한다.
VITE는 ES모듈로 빌드한다고 했던 것같은데 좀더 자세히 공부해야할 필요가 있을것 같다.
1. VITE :
1-1. VITE의 사용배경?
: 비트가 나오게 된 배경은 웹팩보다 빠르게 개발하고 배포할 수 있기 때문이다.
1-2. 정확하게 어떤 부분에서 "개발"이 빨라지고 "배포"가 빨라진걸까?
(1) 개발 속도
: 매번 번들링을 하지 않기 때문에 개발 속도가 빠를 수 있음
VITE는 모듈을 dependencies 와 source code로 구분한다.
-
dependencies
: 개발시 내용이 변경되지 않을 일반적인 소스 코드사전 번들링은 ESBuild가 함
-
source code
: JSX, CSS 컴포넌트와 같이 컴파일링이 필요하고 수정이 잦은 일반적이지 않은 소스 코드ESM을 사용해서 브라우저에게 소스 코드를 제공
| 기존의 번들러(예: webpack) | VITE |
|---|---|
| 🐢 모듈 번들링이 완료된 후에 개발 서버를 구동 🐢 | ⚡️ ESM을 사용해서 브라우저가 요청하는 수정된 모듈(source code)만 전송해주고 브라우저가 모듈 번들링 기능을 수행함 ⚡️ (사전 번들링은 ESBuild가 함) |
(2) 배포
: Rollup을 사용함.
- 배포에서는 번들링을 하는 것이 더 나은 이유
: 번들되지 않은 ESM을 가져오는 것은중첩된 import로 인해 추가 네트워크 통신이 발생되므로 전체 페이지 로드 시간이 증가하여 비효율적이기 때문이다.
중첩된 import로 인해 추가 네트워크 통신이 발생
: 브라우저가 스크립트를 다운로드, 실행 -> 중첩된 import를 만나 해당 모듈을 다운로드, 실행 -> ...
- ESBuild가 아닌 Rollup을 사용하는 이유
: 유연한 플러그인 API랑 인프라 때문이다.
2. 추가적으로 알게 된 개념
2-1. ESM (자바스크립트 네이티브 모듈)
: ES6에 도입된 모듈 시스템으로, import, export를 사용해서 분리되어 있는 자바스크립트 파일끼리 접근이 가능하게 해줌
2-2. ESBuild
- 웹팩보다 10~100배 빠름
- Go 언어로 작성됨
3. 참고 :
챗지피티로 공부한 내용
VITE 공식문서
캡틴판교
VITE란
⭐️차세대 번들러 비교 및 분석 (feat. webpack, rollup, esbuild, vite)
삐약