Dynamic import chunking

Summary

import() creates async chunks named by bundler (webpack magic comments, Vite rollup output). Shared dependencies hoist to common chunks — changing one dynamic import can reshuffle hashes. Use webpackPrefetch/modulepreload for likely-next routes. Verify chunk size in analyzer, not just count.

Code example

async function loadChart() {
  const { renderChart } = await import(
    /* webpackPrefetch: true */ './chart-module.js'
  );
  renderChart('#canvas');
}

Key points

• import() creates async chunks named by bundler (webpack magic comments, Vite rollup output).
• Shared dependencies hoist to common chunks — changing one dynamic import can reshuffle hashes.
• Use webpackPrefetch/modulepreload for likely-next routes.
• Verify chunk size in analyzer, not just count.

Further reading

• import()
• Dynamic imports

Related concepts

• Code splitting strategies
• Preload vs Prefetch vs Preconnect