피드로 돌아가기
Dev.toFrontend
원문 읽기
PerformanceObserver 기반 Vite Cold Start 로딩 시각화 구현
Vite Cold Start White Screen? A Plugin Shows Resource Loading on Page
AI 요약
Context
Vue 프로젝트 규모 확장에 따른 Vite dev server의 Cold Start 시 화이트 스크린 지속 시간 증가. 네트워크 탭 확인 없이 브라우저 상에서 리소스 로딩 상태를 실시간 파악하기 위한 가시성 확보 필요.
Technical Solution
- PerformanceObserver API를 활용한 리소스 로딩 이벤트 실시간 모니터링 체계 구축
- Vite의 transformIndexHtml 훅을 통해 index.html head 최상단에 로딩 스크립트 주입
- head-prepend 전략을 통한 메인 애플리케이션 실행 전 로딩 지표 우선 렌더링 구조 설계
- DOMContentLoaded 이벤트 핸들러를 통한 로딩 완료 시점의 UI 자동 제거 및 Observer disconnect 처리
- 테마 설정 기반의 CSS 인라인 스타일 주입으로 런타임 스타일 충돌 방지 및 UI 커스텀 지원
실천 포인트
1. Web Performance API를 활용하여 런타임 리소스 로딩 병목 지점 식별
2. Vite 플러그인의 head-prepend 기능을 사용하여 초기 렌더링 전 필수 스크립트 실행 보장
3. DOMContentLoaded 기반의 리소스 정리 로직으로 메모리 누수 및 UI 잔상 방지