HomeComputer ScienceTree-Shaking Dependency Graph Pruner

Tree-Shaking Dependency Graph Pruner (2D)

Interactive 2D module dependency graph: toggle which exports the entry point actually uses, watch a real BFS reachability traversal mark dead code, and see the mobile app bundle size shrink live in kilobytes.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-app-bundling-size-optimization ↗ Open standalone

Mobile bundlers don't shrink an app by guessing — they run reachability analysis. This simulator builds a real module dependency graph on a 2D canvas, runs a breadth-first search from a chosen entry point over only the edges you say the entry point actually calls, and colors every module by whether the bundler would genuinely keep it. Un-check an export the entry point no longer uses and watch its whole unreachable branch turn red and drop out of the bundle; toggle tree-shaking off to see the unpruned bundle, toggle minification for a further flat cut on the surviving code, and add random dependency edges to see how one new import can drag a whole dead cluster back into the shipped bundle. The kept/pruned size in kilobytes and the overall size-reduction percentage update live from the actual traversal, not a script.

⚙ Under the hood

Interactive 3D module dependency graph: run depth-first reachability analysis from the app entry point, prune dead modules with tree-shaking and minification, and watch the mobile app bundle size shrink live in kilobytes.

tree-shakingbundle-sizedependency-graphdead-code-eliminationmobile-devdfs

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)