WSH: Lazy Loading Modals and Route Components

Reducing initial bundle size by lazy-loading components that are not needed on first render.

Use this skill when eager imports of modals or route containers bloat the main JS bundle.

Techniques

React.lazy for Route Components

// Before: eager import includes all deps (react-markdown, syntax-highlighter, etc.)
import { CrokContainer } from "./CrokContainer";

// After: lazy import — chunk only loaded when /crok route is visited
const CrokContainer = React.lazy(() =>
  import("./CrokContainer").then((m) => ({ default: m.CrokContainer }))
);