managing-loading-optimization

运用先进的代码分割与懒加载技术，有效缩减初始包体积，大幅提升首页加载速度。

SKILL.md

--- frontmatter

name: managing-loading-optimization
description: Advanced code-splitting and lazy-loading techniques. Use to reduce initial bundle size and speed up the homepage.

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

tsx

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.