[fix] 초기 로드 렌더 차단 리소스 제거 - #1945
Conversation
manualChunks가 react-datepicker와 date-fns를 같은 'dates' 청크로 묶고 있었다. date-fns는 getDeadLineText 등 메인 진입 경로에서 정적 import되므로, 관리자 화면에서만 쓰는 react-datepicker까지 초기 그래프로 끌려와 JS 103.9KB가 모든 페이지에서 modulepreload되고 CSS 22KB가 렌더를 차단했다.
Krona One은 관리자 로그인 화면의 'Log in' 제목 한 곳에서만 쓰는데, index.html의 동기 stylesheet라 전체 방문자의 첫 렌더를 막고 있었다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 57 minutes Limit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?Wait for the limit to reset, then comment An organization admin can change what happens after included review limits in Billing. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
#️⃣연관된 이슈
📝작업 내용
Lighthouse가 짚은 렌더 차단 요청 4건을 추적한 결과, 원인이 서로 다른 두 가지였습니다.
1. react-datepicker가 초기 청크에 딸려오던 문제 (
vite.config.ts)manualChunks가react-datepicker와date-fns를 둘 다'dates'청크로 묶고 있었습니다.date-fns는getDeadLineText.ts,formatTimeAgo.ts등 메인 진입 경로에서 정적 import 되기 때문에, 관리자 모집 설정 탭에서만 쓰는react-datepicker까지 초기 그래프로 끌려왔습니다.react-datepicker를'datepicker'별도 청크로 분리했습니다.AdminRoutes지연 청크로 이동2. 관리자 전용 폰트가 전체 렌더를 막던 문제 (
index.html)Krona One은 관리자 로그인 화면의
Log in제목 한 곳(LoginTab.styles.ts:31)에서만 쓰는데, 동기 stylesheet라 관리자 페이지를 볼 일 없는 방문자 전원의 첫 렌더를 잡고 있었습니다.media="print" onload="this.media='all'"로 비동기 로드로 바꿨습니다.검증 방법
vite build후dist/index.html에 datepicker 관련<link>가 없고,AdminRoutes-*.js의__vitePreload의존 목록에만 문자열로 남는 것 확인<link>에media="print" onload속성이 유지되는 것 확인영향 범위
Log in제목은 Krona One이 늦게 적용되어 잠깐 폴백 폰트로 보일 수 있습니다.onload핸들러는 차단되지 않는 것을 확인했습니다.