2nd/00_Raw/Vite.md

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