Perf/frontend optimization

[Nohgh]

개요

• 대시보드의 주요 차트 컴포넌트들에 지연 로딩(Lazy Loading)을 적용하여 초기 로드 시의 번들 크기를 최적화하고 첫 페이지 렌더링 성능을 개선합니다.
• 브라우저 익스텐션(apps/extension) 빌드 결과물의 파일 크기를 시각적으로 모니터링하기 위해 rollup-plugin-visualizer 번들 분석 도구 지원을 추가합니다.

작업 내용

• 대시보드 차트 지연 로딩 (Lazy Loading) 도입 (apps/web)

  • [NEW] lazy-charts.tsx: next/dynamic을 사용하여 ActivityTrendChart와 BrowserDistributionChart를 SSR 비활성화 및 로딩 스켈레톤과 함께 지연 로딩하도록 선언했습니다.
  • [MODIFY] chart-empty.tsx: 차트 청크가 로딩되는 동안 표시될 스켈레톤 UI 컴포넌트(ChartSkeleton)를 신규 구현했습니다.
  • [MODIFY] dashboard-view.tsx: 기존에 바로 임포트하던 차트 컴포넌트들을 지연 로딩 버전으로 교체하여 초기 페이지 로딩 시 차트 관련 라이브러리(Chart.js 등)로 인한 초기 번들 크기 부담을 덜어내도록 설계했습니다.

• 번들 크기 시각화(Bundle Size Visualizer) 지원 (apps/extension)

  • [MODIFY] pnpm-lock.yaml: apps/extension 개발 의존성으로 rollup-plugin-visualizer 패키지를 추가했습니다.

검증 결과

• Test Files: 20 passed (Web: 11, Extension: 9)
• Tests: 115 passed (Web: 45, Extension: 70)
• tsc --noEmit 통과
• biome check (또는 lint/format) 통과

비고

• rollup-plugin-visualizer가 pnpm-lock.yaml 파일에 devDependencies로 추가되었으나, apps/extension/package.json에는 해당 패키지 선언이 누락되어 있어 lockfile과의 싱크 미스매치가 존재합니다. 이 부분에 대한 패키지 명세 보완이 추가로 필요할 수 있습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
dookmark-web	Skipped		Jul 5, 2026 6:13am