Skip to content

Lazy-load heavy UI components to reduce bundle size #10

Description

@BunsDev

Problem

44 shadcn/ui components, Shiki syntax highlighting, and Recharts are all eagerly loaded, increasing the initial bundle size and time-to-interactive for every page — even pages that don't use these components.

Proposed Solution

Use next/dynamic with { ssr: false } (where appropriate) to lazy-load heavy components:

  • Code blocks (code-block.tsx) — Shiki is large; lazy-load on pages that render code
  • Charts (chart-area-interactive.tsx) — Recharts is heavy; lazy-load on dashboard
  • Command palette — Only needed on keyboard shortcut trigger
  • Promotion dialogs — Only needed on user action
  • Calendar view — Only loaded on /calendar route

Acceptance Criteria

  • Identified components are dynamically imported
  • Initial page load bundle size is measurably reduced
  • Loading states (skeletons/spinners) shown while components load
  • No regressions in functionality
  • pnpm build output shows improved chunk splitting

Notes

  • Run npx @next/bundle-analyzer before and after to measure impact
  • Prioritize components with the largest import trees

🤖 Generated with Claude Code

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestperformanceSpeed and resource optimization

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions