skillhub-088-vercel-react-best-practices
wehub-skill-sync
39 行
805 B
Markdown
39 行
805 B
Markdown
---
|
|
|
|
```yaml
|
|
---
|
|
title: 重型组件的动态导入
|
|
impact: CRITICAL
|
|
impactDescription: 直接影响 TTI 与 LCP
|
|
tags: bundle, dynamic-import, code-splitting, next-dynamic
|
|
---
|
|
|
|
## 重型组件的动态导入
|
|
|
|
使用 `next/dynamic` 对首次渲染不需要的大型组件进行懒加载。
|
|
|
|
**错误做法（Monaco 随主 chunk 一起打包，约 300KB）：**
|
|
|
|
```tsx
|
|
import { MonacoEditor } from './monaco-editor'
|
|
|
|
function CodePanel({ code }: { code: string }) {
|
|
return <MonacoEditor value={code} />
|
|
}
|
|
```
|
|
|
|
**正确做法（Monaco 按需加载）：**
|
|
|
|
```tsx
|
|
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} />
|
|
}
|
|
```
|