Dynamic import() turns module loading from a build-time, eager operation into a runtime, on-demand one.

Static vs dynamic

// Static — hoisted, loaded eagerly, must be top-level
import { heavyThing } from "./heavy";

// Dynamic — runs anywhere, returns a Promise, loads on demand
const { heavyThing } = await import("./heavy");

import() looks like a function but is a special syntactic form. It returns a Promise that resolves to the module's namespace object.

What it enables

1. Code splitting — the bundler (webpack/Vite/Rollup) sees import() and splits that module into a separate chunk that's only downloaded when the import() actually runs. Your initial bundle shrinks.

2. Lazy loading — load code only when it's needed:

button.addEventListener("click", async () => {
  const { openEditor } = await import("./editor"); // only when clicked
  openEditor();
});

3. Route-based splitting — each route's code loads when you navigate there. This is what React.lazy is built on:

const Dashboard = React.lazy(() => import("./Dashboard"));

4. Conditional loading — load a module only if a condition/feature flag is true, or pick between implementations:

if (user.locale !== "en") {
  await import(`./locales/${user.locale}.js`);
}

5. Loading optional/heavy dependencies — charting libs, rich text editors, polyfills — kept out of the critical path.

Why it matters

The initial bundle is the single biggest lever on Time to Interactive. Dynamic imports let you ship only what the first screen needs and defer the rest. The tradeoff: each lazy chunk is a network round-trip, so you need loading states (Suspense) and sometimes prefetching (<link rel="prefetch"> or webpack magic comments) to hide the latency.

The framing

"Static import is eager and build-time; import() is a Promise-returning expression that loads on demand. It's the primitive behind code splitting — the bundler carves the target into its own chunk. That enables route-based splitting, lazy-loading heavy or rarely-used features, and conditional loading. The cost is a network round-trip per chunk, so you pair it with Suspense fallbacks and prefetching."