skillhub-088-vercel-react-best-practices/rules/bundle-conditional.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
条件模块加载	HIGH	仅在需要时加载大型数据	bundle, conditional-loading, lazy-loading

条件模块加载

仅在某个功能被激活时才加载大型数据或模块。

示例（懒加载动画帧）：

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 中，从而优化服务端打包体积和构建速度。