wehub-skill-sync
32 lines
935 B
Markdown
32 lines
935 B
Markdown
---
|
|
title: 条件模块加载
|
|
impact: HIGH
|
|
impactDescription: 仅在需要时加载大型数据
|
|
tags: bundle, conditional-loading, lazy-loading
|
|
---
|
|
|
|
## 条件模块加载
|
|
|
|
仅在某个功能被激活时才加载大型数据或模块。
|
|
|
|
**示例（懒加载动画帧）：**
|
|
|
|
```tsx
|
|
function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
|
|
const [frames, setFrames] = useState<Frame[] | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (enabled && !frames && typeof window !== 'undefined') {
|
|
import('./animation-frames.js')
|
|
.then(mod => setFrames(mod.frames))
|
|
.catch(() => setEnabled(false))
|
|
}
|
|
}, [enabled, frames, setEnabled])
|
|
|
|
if (!frames) return <Skeleton />
|
|
return <Canvas frames={frames} />
|
|
}
|
|
```
|
|
|
|
`typeof window !== 'undefined'` 检查可防止将该模块打包到 SSR 中，从而优化服务端打包体积和构建速度。
|