✨ Enhancements: Implement Code Splitting to Reduce Initial Bundle Size

[Sahil-Shadwal]

Problem

Lighthouse audit shows 631 KiB of unused JavaScript on initial page load. The Monaco Editor and other components load upfront even when not immediately needed, impacting performance on slower connections.

Proposed Solution

Implement code splitting to lazy-load non-critical components:

1. Monaco Editor (~200-250 KiB savings)
   • Lazy load only when user navigates to lesson pages
   • Add loading skeleton for smooth UX
2. Route-based splitting (~100-150 KiB savings)
   • Dynamic imports for each chapter's content
   • Load only active lesson data
3. Component-level splitting (~50-100 KiB savings)
   • Defer Certificate modal, Outline drawer, Feedback components
     Expected Impact:

• Bundle size: -300-400 KiB
• LCP: -200-400ms
• Better experience on 3G/4G connections

Implementation

Monaco Editor:

// app/components/CodeEditor/CodeEditor.tsx
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('@monaco-editor/react'), {
  loading: () => <EditorSkeleton />,
  ssr: false
});

Next.js Config:

experimental: {
  optimizePackageImports: ['@chakra-ui/react', '@monaco-editor/react']
}

Files to Modify

• app/components/CodeEditor/CodeEditor.tsx
• app/content/layout.tsx
• next.config.mjs
• app/components/CertificateButton/CertificateButton.tsx
• app/components/OutlineDrawer/OutlineDrawer.tsx

Success Criteria

• Initial bundle reduced by 300+ KiB
• LCP < 1.4s
• Smooth loading states
• All tests pass

ARE YOU WORKING ON THIS

YES please assign me this issue