Skip to content
LiveNew tools this week
Submit
AIMarketly
managing-loading-optimization logo

Code Splitting and Lazy Loading

managing-loading-optimization

Advanced code-splitting and lazy-loading techniques. Use to reduce initial bundle size and speed up the homepage.

majiayu000/claude-skill-registry-data0installs22stars

SKILL.md

Full skill instructions

Code Splitting and Lazy Loading

When to use this skill

  • Importing heavy libraries (Charts, Leaflet Maps, Rich Text Editors).
  • Loading non-critical UI (e.g., a "Support Chat" widget).

Implementation

import dynamic from 'next/​dynamic';

const InteractiveMap = dynamic(() => import('@/​components/​Map'), {
    loading: () => <Skeleton className="h-[400px]" />,
    ssr: false, // Disable for browser-only libs like Leaflet
});

Instructions

  • ssr: false: Use this for components that use window or complex browser-only APIs.
  • Chunks: Group related components into shared chunks if they are always used together.
  • Analysis: Use @next/​bundle-analyzer to identify large dependencies.