code-splitting

What problem does it solve?

Large JavaScript bundles slow down initial page load, impacting user experience, SEO, and overall application performance. This Skill provides strategies to reduce bundle size by loading code only when needed.

Core Features & Use Cases

• Basic Pattern: Implement lazy loading for components using lazy() and Suspense.
• Route-Based Splitting: Optimize initial load by splitting code per route, loading only the necessary components for the current page.
• Component-Based Splitting: Lazy load specific components (e.g., charts, tables) only when they become visible or are explicitly requested.
• Use Case: Implement code splitting for the /admin route in your application, ensuring the large admin dashboard component is only loaded when a user navigates to that specific route, improving initial load times for other pages.

Quick Start

Apply code splitting to the src/components/Chart.js component using lazy() and Suspense so it loads only when visible.