← Lessons

quiz vs the machine

Gold1350

Frontend

Tree Shaking

Drop unused code from bundles by analyzing static imports.

5 min read · core · beat Gold to climb

What it removes

Tree shaking is dead code elimination for bundles. The bundler walks your import statements, marks which exports are actually used, and leaves the rest out of the final output.

Why ES modules enable it

It depends on ES module syntax because import and export are static. The bundler can see at build time exactly what is referenced, which is not possible with dynamic require calls that may be computed at runtime.

What blocks it

  • Side effects at module top level, since removing the module might skip needed work.
  • A package not marked with sideEffects false in its config.
  • Re exporting an entire library through a barrel file that pulls everything in.

Getting it right

Import only the named functions you need rather than a whole namespace. Prefer libraries that ship ES modules and declare themselves side effect free so the bundler can prune aggressively.

Key idea

Tree shaking removes unused exports using static ES module analysis, but top level side effects and barrel imports can quietly defeat it.

Check yourself

Answer to earn rating on the learn ladder.

1. Why do ES modules enable tree shaking?

2. What commonly prevents code from being shaken out?