조건부 모듈 로딩

Overview

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

Impact

• Priority: HIGH
• Performance: loads large data only when needed

Usage Example

Lazy-load Animation Frames

function AnimationPlayer({ enabled }: { enabled: 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])

  if (!frames) return <Skeleton />
  return <Canvas frames={frames} />
}

Key Points

• Conditional import: Load module only when feature is active
• SSR optimization: typeof window !== 'undefined' check excludes from server bundle
• Build optimization: Improves server bundle size and build speed
• Error handling: Provide appropriate fallback on import failure

Use Cases

• Large animation data
• Conditional features (feature flags)
• Permission-based modules
• A/B test variations

Benefits

• Reduced initial bundle size
• Prevents unnecessary data transfer
• Faster initial loading

---

Tags: bundle, conditional-loading, lazy-loading