I often see developers using code splitting and tree shaking without really understanding what the bundler does underneath. So I built a small tool to visualize it.

A quick mental model

Code splitting

import() tells the bundler:

“This code isn’t needed right now, but may be needed later.”

The bundler reacts by splitting that code into an async chunk — a separate file the browser only downloads when the import actually runs.

Tree shaking

If a module exports five things and only two are used, the bundler removes the rest.

Smaller bundles. Faster apps.

What the playground does

Instead of reading about it, you can watch it happen. The tool lets you:

  • Build a module graph visually
  • Run a real Rollup bundler over it
  • See chunk splitting live
  • Watch tree shaking remove unused exports

It’s the explanation I wish I had when I first started caring about bundle size.

Source on GitHub.