Tree shaking

Tree shaking is your bundler walking the import graph, marking every export nothing reaches, and deleting it before the file ships. Import one date helper from a 70kb library and, in the good case, the browser gets that one helper. The name comes from shaking a tree until the dead leaves fall off.

It works best on ES modules, because 'import' and 'export' can be read statically without running the code. CommonJS 'require()' is decided at runtime, so bundlers fall back to guessing and usually keep everything to be safe. Modern bundlers can still eliminate some CommonJS when the shape is obvious enough to analyse, so this is a reliability difference, not a hard wall. The other half of the deal is the 'sideEffects' field in package.json: it is the library author promising that importing a file does nothing on its own, which frees the bundler to drop untouched modules entirely.

The classic disappointment: you tree shake, the bundle barely moves. Usual culprits are a CommonJS-only dependency, a package with no 'sideEffects' declaration, or a barrel file that drags in modules which do real work on import. Note that 'import * as X' and barrels are not automatically fatal: when the graph stays statically analysable and side-effect free, a good bundler still drops what you never touch. They just make it much easier for one stray side effect to pin the whole tree in place. Check with a bundle analyzer before blaming the config, and prefer libraries that publish real ESM builds.