Vite+

자바스크립트 생태계는 정말 많은 발전을 해왔지만, 그만큼 종류와 선택지가 너무 다양하다.

프로젝트를 시작할 때 빌드도구 (Vite, Webpack, Rollup), 테스트 프레임워크 (Jest, Vitest), 린터 (ESLint, Prettier) 등. 각각 선택부터 설치, 설정까지…

각 도구들은 너무 강력한 장점과 기능을 가지고 있지만, 가끔 호환성에 문제가 생기거나 설정 출돌을 일으키기도 한다. 

 

Vite+란?

• 기존 Vite에 추가 기능을 더한 업그레이드 버전 (빌드, 테스트, 린팅, 코드 분석 등이 하나의 흐름 안에서 작동)
• Vite가 제공하던 빠른 개발 서버와 빌드 환경에 더해 여러 오픈소스 툴을 하나로 통합한 통합형 개발 플랫폼 (Rust 기반)
• Cli 기반 개발도구 (프론트엔드 개발 도구)
• 빌드와 개발 서버 구동 시간이 매우 빠름 (webpack, rollup 등 보다 훨씬)
  (기존 번들러 기반에서는 코드를 업데이트하게 되면 재번들링 과정을 거쳐야 해서 서비스나 코드의 양이 많아질수록 시간이 증가할 수밖에 없다.)

 

명령어

• Vite test: Vitest 기반 단위 테스트 실행 (Jest와 호환)
• Vite run: 캐싱 기능이 내장된 모노레포 태스크 러너. 대부분의 작업이 별도 설정 없이 캐시 (Turborepo와 유사하지만 캐시 무효화 규칙을 직접 지정 필요 X)
• Vite ui: GUI 개발 도구, 모듈 해석/변환, 번들 크기, 트리셰이킹 분석, 프레임워크 개발 도구 통합 등 시각적으로 제공

 

∴ Vite+는 기존 Vite 생태계 그대로 계승

∴ React, Vue, Tanstack Start (Router), SvelteKit 등 주요 프레임워크와 완벽히 호환

 

 

이상 스텔라였습니다 ✍🏻