bundle-conditional

title: Conditional Module Loading
impact: HIGH
impactDescription: loads large data only when needed
tags: bundle, conditional-loading, lazy-loading

Conditional Module Loading

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

**Example (lazy-load animation frames):**

function AnimationPlayer({ enabled }: { enabled: boolean }) {
  const [frames, setFrames] = useState<Frame[] | null>(null)
  const [loadError, setLoadError] = useState(false)

  useEffect(() => {
    if (enabled && !frames && !loadError && typeof window !== 'undefined') {
      import('./animation-frames.js')
        .then(mod => setFrames(mod.frames))
        .catch(() => setLoadError(true))
    }
  }, [enabled, frames, loadError])

  if (loadError) return <ErrorMessage />
  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.