bundle-dynamic-imports
17
总安装量
13
周安装量
#20454
全站排名
安装命令
npx skills add https://github.com/theorcdev/8bitcn-ui --skill bundle-dynamic-imports
Agent 安装分布
claude-code
10
opencode
8
codex
8
windsurf
8
gemini-cli
7
antigravity
7
Skill 文档
Dynamic Imports for Heavy Components
Use next/dynamic to lazy-load large components not needed on initial render.
Incorrect (Monaco bundles with main chunk ~300KB):
import { MonacoEditor } from './monaco-editor'
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}
Correct (Monaco loads on demand):
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false }
)
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}