Vite 빌드 파이프라인에서 vite-plugin-image-optimizer와 Sharp를 활용하여 PNG, JPG, SVG 이미지를 무손실/고효율 압축하고, 차세대 이미지 포맷인 WebP 및 AVIF로 자동 변환하여 LCP를 극대화하는 방법을 다룹니다.

Vite 환경에서 모던 브라우저의 성능 이점을 희생하지 않고, @vitejs/plugin-legacy의 차등 서빙(Differential Serving) 기법을 통해 구형 웹뷰 및 레거시 브라우저용 폴리필 번들을 분리 생성하는 최적화 전략을 정리합니다.

Vite 빌드 단계에서 vite-plugin-compression을 활용하여 정적 에셋(.js, .css, .html)을 Gzip 및 Brotli로 미리 압축하고, 웹 서버(Nginx)의 정적 모듈과 연동하여 CPU 낭비 없이 최고 압축률로 서빙하는 아키텍처를 구축합니다.

rollup-plugin-visualizer를 도입하여 Vite 프로덕션 번들의 구성 요소를 시각적으로 분석하고, CommonJS 모듈이나 사이드 이펙트로 인해 깨진 트리 쉐이킹(Tree-shaking)을 찾아내 수백 킬로바이트의 데드 코드를 제거하는 실무 감사 기법을 다룹니다.

Vite 환경에서 라우트별 동적 임포트(import())를 활용한 코드 분할 원리와 Vite의 modulepreload 힌트 자동 주입 메커니즘을 살펴보고, 마우스 호버 및 뷰포트 기반 사전 프리페칭을 구현하는 방법을 다룹니다.

Vite 프로덕션 빌드에서 발생하는 대형 번들 경고를 해결하고, Rollup manualChunks 설정을 활용하여 React 코어, UI 컴포넌트, 대용량 차트 라이브러리를 효율적으로 분리해 브라우저 캐싱 효율을 극대화하는 방법을 다룹니다.

Vite 개발 서버의 On-demand 변환 특성으로 인해 발생하는 초기 페이지 로딩(Cold Start Waterfall) 지연을 server.warmup 옵션을 활용해 사전에 컴파일하고 최적화하는 기법을 정리합니다.

Vite의 esbuild 트랜스파일러가 생략하는 정적 타입 검사의 한계를 보완하기 위해, vite-plugin-checker로 개발 서버 성능 저하 없이 TypeScript와 ESLint 검사를 백그라운드 병렬 처리하는 기법을 정리합니다.

최신 웹 API 보안 제약과 HTTP/2 프로토콜 검증을 위해 Vite 개발 환경에 HTTPS를 구축하는 2가지 접근법(mkcert와 vite-plugin-basic-ssl)의 차이점과 설정법을 정리합니다.

Vite 개발 서버의 server.proxy 옵션을 통해 로컬 개발 환경의 CORS 제약과 SameSite 인증 쿠키 누락 문제를 해결하고, proxyRes 후킹으로 Set-Cookie 도메인을 재작성하는 실무 기법을 정리합니다.