Load heavy, rarely used components lazily

A chart library, rich text editor or admin panel that only some users open should not be in the bundle every visitor downloads.

1. Load it with lazy and a dynamic import().
2. Wrap it in Suspense with a fallback that matches its size, so the layout does not jump.

Check your bundle analyzer to find the largest dependencies first. Split by route and by rarely used feature, not into dozens of tiny chunks, because each chunk is another request.

const Editor = lazy(() => import('./editor'));

function Page() {
  return (
    <Suspense fallback={<div className="editor-skeleton" />}>
      <Editor />
    </Suspense>
  );
}