A dynamic import is a promise, and webpack makes it a chunk

The syntax looks like a function call and is a language feature, and webpack recognises it as a split point without any configuration.

// a separate chunk, fetched on demand
const { renderChart } = await import(
  /* webpackChunkName: "charts" */ './charts'
);

// and in React
const Reports = React.lazy(() => import('./Reports'));

<ErrorBoundary>
  <Suspense fallback={<Spinner />}><Reports /></Suspense>
</ErrorBoundary>

The magic comment naming the chunk is worth adding, because the default names are numeric and a bundle report full of 3.chunk.js tells you nothing. The error boundary around a lazy component is not optional and is missing from most examples: a chunk that fails to load — which happens on every deploy for anyone with the page already open — rejects the import and blanks the tree. A fully dynamic specifier defeats the analysis, so import(path) with a variable bundles everything it might match.