Performance
Tree shaking
Tree shaking is a bundler step that removes exported code nothing imports, so unused functions do not ship. It relies on static ES module `import` and `export` statements to know what is dead.
How it is measured
Measure bundle size before and after, using a visualizer such as `rollup-plugin-visualizer` or webpack-bundle-analyzer. Check that a library appears at function level instead of whole. Lighthouse's 'Reduce unused JavaScript' lists what remains.
It works only if modules are ESM and the package marks itself side-effect-free with `sideEffects: false` in `package.json`. CommonJS `require` calls and top-level side effects keep code in. Verify by importing one function and searching the output for the others.
Worked example
A dashboard imports `{ debounce }` from lodash (CommonJS build), pulling in 71 KB of minified code. Switching to `lodash-es` lets the bundler keep only 1.4 KB.
In the same project, `import * as Icons` keeps 412 icons at 190 KB until the code changes to named imports, which leaves 9 icons at 6 KB.
How it differs
Tree shaking removes whole unused exports. Minification shrinks the code that remains. A bundle can be minified perfectly and still carry a library's other 40 functions. Code splitting is different again: it keeps the code but loads it later.
Common errors
Importing from a library's CommonJS entry. Using barrel files that re-export everything with side effects. Namespace imports. Assuming development builds shake. Transpiling to CommonJS before bundling. Assuming a library is shakeable without checking.
In practice
Run your bundle analyzer and sort by size. For each large dependency, check whether you can import by path or switch to its ESM build, and confirm the unused parts disappear. Re-run after each change and look for kilobytes, not hopes.