Vite [비트] : 프랑스어) 빠르다
Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구
빠르고 간결한 개발에 초점을 두고 만들어진 빌드 도구
발음 : vit (바이트 아님 주의)
특징
1. 속도 향상
🟡 번들링 속도 향상
- 차세대 프론트엔드 개발 도구로 빌드와 개발 서버 구동 시간이 매우 빠름.
- Vite의 ESBuild는 Go로 만들어짐. ( cf) webpack 등 = JS)
👉 webpack, parcel보다 10배 이상 빠르다고 함!! - 브라우저가 요청하는 모듈을 전송하고, 모듈 번들링 기능을 브라우저가 수행.
👉 개발서버 구동 아주 빠름~(기존 번들러는 모듈 번들링 끝낸 후 개발서버 구동 = 시간 오래걸림)
🟡 소스코드 갱신 속도 향상
- 어떤 모듈이 수정되면 수정된 모듈과 관련된 부분만 새로 교체함.
→ 브라우저에서 해당 모듈 요청하면 교체된 모듈을 전달함.
→ 앱 사이즈가 커져도 갱신 시간에 영향 X
기존 번들러 : 소스코드 업데이트 -> 번들링 과정 다시 거쳐야 함.
→ 서비스 커질 수록 소스 코드 갱신 시간도 증가함.
2. HTTP 헤더 활용
- Http 헤더를 활용하여 전체 페이지의 로드 속도를 높임.
- 필요에 따라 소스 코드는
304 Modified, 디펜던시는Cache-Control: max-age=31536000, immutable을 이용해 캐싱됨.
→ 요청 횟수 최소화 = 페이지 로딩 빠르게
Vite 설치
12.2.0 버전 이상의 Node.js를 요구하며, 템플릿에 따라 더 높은 버전의 Node.js를 요구할 수 있다.
npm create vite@latest
or
yarn create vite
vite를 통해 생성된 디렉터리 구조
- src : JS, TS 코드 작성. 진입파일은 main.tsx(jsx).
- public : 정적 파일과 리소스 저장.
- dist : 빌드 후 생성된 산출물이 저장됨.
// 템플릿 생성
npm create vite@latest my-react-app -- --template react-ts
npm init vite my-react-app -- --template react-ts
yarn create vite my-react-app --template react-ts
npm create vite@latest my-react-app -- --template vue
yarn create vite my-vue-app --template vue
// 실행 // 빌드
npm run dev npm run build
or or
yarn dev yarn build
Front-end