Code splitting with dynamic import

Shipping the checkout code to everyone who visits the homepage is the default, because a single entry point produces a single bundle. A dynamic import is a split point the bundler understands.

button.addEventListener('click', async () => {
  const { openEditor } = await import('./editor');
  openEditor(target);
});

webpack turns that into a separate chunk fetched on demand, and the syntax is a proposal rather than a standard this year — so it needs the Babel plugin. Naming the chunk with a magic comment makes the output readable rather than a numbered file. The trade is a network request at the moment of interaction, so it suits an editor or a modal and not something needed on first paint.