AgentSkillsCN

conditional-module-loading

条件性模块加载

SKILL.md
--- frontmatter
name: conditional-module-loading
description: Conditional Module Loading

Conditional Module Loading

Load large data or modules only when a feature is activated.

Example (lazy-load animation frames):

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} />;
}

The typeof window !== 'undefined' check prevents bundling this module for SSR, optimizing server bundle size and build speed.