Lazy components

lazy loads a component's code only when it is first rendered. It takes a function that imports the module:

const Greeting = lazy(() => import("./greeting"));

Render it like any other component. Until the code arrives, the nearest Loading boundary shows its fallback, as it does for data. Bundlers put each dynamic import in its own file, so code for pages and panels nobody opens is never downloaded.

Create a lazy component once, at the top level of a module, not inside a component.

Try it: replace the static import of Greeting with lazy. The fake delay in the starter makes the fallback visible.