사용자 의도 기반 프리로드

Overview

Preload heavy bundles before they're needed to reduce perceived latency.

Impact

• Priority: MEDIUM
• Performance: reduces perceived latency

Usage Examples

Preload on hover/focus

function EditorButton({ onClick }: { onClick: () => void }) {
  const preload = () => {
    if (typeof window !== "undefined") {
      void import("./monaco-editor")
    }
  }

  return (
    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
      Open Editor
    </button>
  )
}

When user hovers over the button, the editor preloads. By click time, it's already ready.

Preload when feature flag enabled

function FlagsProvider({ children, flags }: Props) {
  useEffect(() => {
    if (flags.editorEnabled && typeof window !== "undefined") {
      void import("./monaco-editor").then((mod) => mod.init())
    }
  }, [flags.editorEnabled])

  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>
}

Key Points

• Detect user intent: Leverage signals like hover, focus
• Timing: Start loading before actual use
• SSR optimization: typeof window !== 'undefined' check required
• void: Ignore Promise for fire-and-forget pattern

Preload Triggers

• onMouseEnter: Mouse hover
• onFocus: Keyboard focus
• feature flag: Feature activation
• route change: Anticipate next page
• idle time: Browser idle time

Cautions

• Too aggressive preloading wastes bandwidth
• Mobile has no hover, need alternative signals
• Consider network conditions (slow 3G, etc.)

Perceived Performance Improvement

When user clicks button:

• Without preload: Loading indicator → wait → content
• With preload: Instant content display

---

Tags: bundle, preload, user-intent, hover