# [[Vite]]

## 📌 Brief Summary
Vite는 2025년 현재 현대적인 React 애플리케이션을 위한 표준 빌드 도구로 자리 잡은 강력한 도구입니다 [1, 2]. 개발 중에는 모든 코드를 미리 번들링하지 않고 브라우저에 네이티브 ES 모듈(ESM) 형태로 직접 제공하여 즉각적인 서버 시작과 매우 빠른 HMR(Hot Module Replacement)을 지원합니다 [2, 3]. 프로덕션 배포 시에는 내부적으로 Rollup을 사용하여 코드 스플리팅 및 트리 쉐이킹이 적용된 최적화된 번들을 생성하며, 과거의 Create React App이나 Webpack을 대체하여 프론트엔드 성능을 극대화합니다 [1, 2, 4, 5].

## 📖 Core Content
- **핵심 아키텍처 및 동작 원리:** Vite는 개발 환경과 프로덕션 환경에서 각기 다른 하이브리드 아키텍처를 사용합니다 [4]. 개발 중에는 네이티브 ES 모듈을 활용해 필요한 파일만 로드하므로 프로젝트 규모가 커져도 개발 환경이 빠르게 유지됩니다 [2, 3, 6]. 또한 기존 Babel 대신 Rust 기반의 컴파일러인 SWC를 사용하여 JSX와 TypeScript 파일을 거의 즉시 컴파일하여 개발 경험을 크게 향상시킵니다 [3, 7, 8]. 반면 프로덕션 빌드 시에는 Rollup을 활용하여 불필요한 코드를 제거하고 에셋을 최적화하여 가벼운 번들을 생성합니다 [4].
- **성능 최적화 및 번들 관리:** 규모가 큰 애플리케이션에서는 메인 번들 크기가 커져 로딩 속도와 웹 성능 지표(Core Web Vitals)에 악영향을 미칠 수 있습니다 [9]. 기본적으로 Vite는 앱 코드와 모든 패키지 의존성을 하나의 파일로 묶기 때문에 "500kB 초과" 경고가 발생할 수 있습니다 [10, 11]. 이를 해결하기 위해 `vite.config.js`에서 `manualChunks`를 설정하여 React 핵심 라이브러리나 차트 등의 무거운 벤더 코드를 별도의 파일로 분리하고, 브라우저 캐싱 효율을 높이는 것이 강력히 권장됩니다 [5, 11-14]. 이와 함께 `React.lazy()` 및 동적 임포트를 활용하여 라우트 단위 코드 스플리팅을 구현하면 초기 화면 렌더링 속도를 크게 단축할 수 있습니다 [14, 15].
- **고급 구성 및 플러그인 생태계:** Vite의 기본 설정은 의도적으로 최소화되어 있지만, 설정 파일을 통해 확장성과 구조적인 제어가 가능합니다 [7]. 모듈 참조를 깔끔하게 유지하기 위한 경로 별칭(Path Aliases) 설정, `VITE_` 접두사를 이용한 클라이언트 측 환경 변수 보안 관리, CORS 문제를 피하기 위한 자체 서버 프록시 기능 등을 지원합니다 [12, 16]. 더 나아가, SVG를 컴포넌트처럼 다루게 해주는 `vite-plugin-svgr`, PWA를 지원하는 `vite-plugin-pwa`, 빌드된 번들 크기를 시각적으로 분석하게 돕는 `rollup-plugin-visualizer` 등의 플러그인들을 통해 프론트엔드 워크플로우를 고도화할 수 있습니다 [15, 17-19].

## 🔗 Knowledge Connections
- **Related Topics:** [[Rollup]], [[Code Splitting]], [[React.lazy()]], [[Performance Optimization]]
- **Projects/Contexts:** [[React Frontend Architecture]], [[Large-scale Application Refactoring]]
- **Contradictions/Notes:** 소스에 따르면 Vite가 기본적으로 매우 빠른 성능을 제공하지만, 대규모의 실무 앱으로 확장할 때에는 개발자가 수동으로 `manualChunks` 분리와 지연 로딩(Lazy Loading)을 직접 구성해 거대한 청크(Large Chunks) 생성을 방지해야만 최적의 로딩 성능을 보장할 수 있다고 강조합니다 [10, 11, 14, 20].

---
*Last updated: 2026-04-26*