OpenSkillIndex← back to search
claude-code

Claude-skill-registry-data managing-loading-optimization

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

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry-data
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry-data "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/managing-loading-optimization" ~/.claude/skills/majiayu000-claude-skill-registry-data-managing-loading-optimization && rm -rf "$T"
manifest: data/managing-loading-optimization/SKILL.md
source content

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.