[#78] perf: 랜딩 페이지 번들 최적화

[PaleBlueNote]

개요

랜딩 페이지 초기 로딩 성능 문제를 분석하고, 번들 구조를 개선했습니다.
rollup-plugin-visualizer로 번들 treemap을 시각화한 결과, 비로그인 방문자에게 불필요한 코드가 대량 전달되고 있었습니다.

Lighthouse Mobile 3회 평균 (vite preview 기준)

지표	Before	After	개선율
FCP	13.3 s	7.0 s	▼ 47%
LCP	13.3 s	7.7 s	▼ 42%
TBT	1,407 ms	710 ms	▼ 50%
Speed Index	13.3 s	7.0 s	▼ 47%
CLS	0	0	유지

---

변경 사항

1. 랜딩 섹션 아이콘 8개 lazy 분리 — chunk-landing 2,487kB → 11kB

LandingIntroSection / LandingPaySection / LandingDocSection 내 SVG 아이콘들이 static import로 묶여 chunk-landing에 전부 포함되고 있었습니다.
각 아이콘을 React.lazy로 전환해 스크롤 진입 시 개별 로딩하도록 변경했습니다.

아이콘	크기
LandingDoc	1,736 kB
LandingSign	270 kB
LandingCoin	204 kB
LandingGroup	182 kB
LandingProblem	80 kB

2. LandingIntroLazy / LandingPayLazy / LandingDocLazy — min-height 추가

감지 대상 div의 height가 0이어서 Intersection Observer가 스크롤 없이 즉시 trigger 되던 버그를 수정했습니다.
min-h-[400px]을 지정해 실제 뷰포트 진입 시에만 로딩되도록 수정했습니다.

3. FeatureCard.tsx — Suspense 누락 버그 수정

lazy 아이콘에 Suspense boundary가 없어 로딩 중 가장 가까운 상위 Suspense(App.tsx)로 탈출하고 있었습니다.
랜딩 전체가 FullScreenLoading으로 교체되는 문제를 각 아이콘에 개별 Suspense를 추가해 수정했습니다.

4. Landing.tsx — LogoIcon static import 전환

히어로 영역 최상단 로고를 lazy + fallback={null}로 처리하고 있어, 초기 렌더 시 로고가 없다가 나타나는 CLS를 유발하고 있었습니다.
static import로 전환해 CLS를 제거했습니다.

5. App.tsx — HomeBoss / HomeStaff / HomeAdmin lazy 전환

vite.config.ts에 chunk-home 분리 규칙이 있었지만, 세 컴포넌트가 static import 상태여서 규칙이 동작하지 않았습니다.
lazy로 전환해 랜딩 방문자(비로그인)가 역할별 홈 화면 코드를 다운로드하지 않도록 했습니다.

6. vite.config.ts — vendor-others 세분화

Firebase / Chart.js / Toss SDK가 모두 vendor-others에 묶여 있었습니다.
각 라이브러리를 별도 청크로 분리해 vendor-others 921kB → 673kB로 감소했습니다.

if (id.includes("firebase")) return "vendor-firebase";
if (id.includes("chart.js") || id.includes("recharts")) return "vendor-charts";
if (id.includes("tosspayments")) return "vendor-toss";

---

번들 크기 변화

청크	Before	After
index.js (gzip)	2,258 kB	110 kB
chunk-landing	2,487 kB	11 kB
vendor-others	921 kB	673 kB
HomeBoss/Staff/Admin	초기 번들 포함	lazy (on demand)