글 작성 시 사용한 vite 버전 → 2.9.9
⚽️ 목표
SideProject를 Vite 기반으로 변경해보기
1. Vite가 뭐길래
•
vite → 프랑스어로 빠르다는 뜻
◦
바이트, 비트 아닙니다. 비트..입…ㄴ니…다..
브라우저가 번들러
•
브라우저에선 ESM을 지원하기 전 까진 JavaScript 모듈화를 네이티브레벨에서 진행할 수 없었음(CJS일때) → 번들링(Webpack, Rollup, Parcel)과 같은 우회적인 방법을 사용할 수 밖에 없었음
◦
브라우저에서 모듈화를 지원하지 않으니 개발할때 만이라도 자체적으로 NodeJS 환경에서 module화 된 개발을 진행했음
◦
하나의 파일(정확히 말하면 소수의 파일)로 번들링하지만 IIFE(즉시 실행 함수)를 이용하여 스코프를 나누는 방식을 채택
•
Webpack, Rollup, Parcel과 같은 번들러 → 모든 파일을 번들링 하고 번들링 결과물을 브라우저에 반영 시키므로 시간이 소요됨
•
브라우저가 번들러이므로 특정 모듈에 대한 소스코드를 미리 번들링 하지않고 브라우저가 알아서 번들링하게 토스 → 기존 번들러 처럼 미리 번들링하는 시간이 소요되지 않음
Esbuild 사용
•
go 언어로 작성된 번들러로 기존 번들러보다 10배 - 100배 더 빠른 속도를 보임
•
배포 시 일반적인 번들링 과정은 여전히 필요함 → 많은 브라우저에서 비교적 최근에야 지원되기 시작했으므로 실제 배포 시 사용 못하는 브라우저 환경이 존재할 수 도 있기때문
•
번들링에는 Esbuild 사용하지 않음 → 코드스플리팅, CSS에 관련된 처리가 다른 브라우저에 비해 상대적으로 미비, Rollup은 ESbuild와 비교했을 때 상대적으로 더 검증되었으므로 Rollup 사용
•
타입스크립트 컴파일러 속도 → TSC보다 Vite에서 사용하는 Esbuild 타입스크립트 트랜스파일링이 20~30배 이상 빠름
소스코드 - 디펜던시의 분리
•
개발 시 디펜던시는 수시로 바뀌지 않음 → 근데 왜 항상 번들링해?
•
개발 시 소스코드는 수시로 바뀜 → 디펜던시가 바뀌지 않을 땐 소스코드만 바꾸므로 쓸데없는 번들링 시간 최소화
2. 설치하기
•
아래와 같이 간단한 시작 가능
npm create vite@latest
# 프로젝트 목적에 맞는 설정
npm i
Bash
복사