TL;DR — Quick Summary
Minification strips whitespace/comments (20–60% reduction). Tree shaking removes unused exports (30–60% reduction). Both are build-time optimizations applied before compression. Essential for keeping JavaScript lean.
What is Minification / Tree Shaking?
Minification removes unnecessary characters from source code (whitespace, comments, long variable names) without changing functionality. Applied during build with tools like Terser (JS), cssnano (CSS), and html-minifier (HTML). Modern bundlers (Vite, Webpack) include minification by default for production.
Tree shaking is dead-code elimination that removes unused exports from JavaScript bundles. It relies on ES module import/export syntax to determine which exports are actually used. Code that is imported but never referenced gets 'shaken off.' For example, importing one function from lodash-es loads ~2KB instead of the full ~70KB library.
Minification reduces individual file sizes; tree shaking reduces what's included in the first place. Both should be applied before compression (Brotli/Gzip) for maximum reduction.
History & Evolution
- •2009 — UglifyJS popularizes JavaScript minification.
- •2015 — ES modules enable tree shaking; Rollup is the first bundler to implement it.
- •2017 — Webpack 2 adds tree shaking support.
- •2020 — Terser replaces UglifyJS as the standard minifier (ES6+ support).
- •2025–2026 — Vite uses Rollup for production builds with automatic minification and tree shaking. SWC and esbuild offer faster alternatives.
Frequently Asked Questions
For step-by-step optimization, platform-specific fixes, code examples, and case studies, read our full guide:
The Ultimate Guide to Core Web Vitals: How to Pass All Metrics & Boost Rankings in 2026Struggling with Minification / Tree Shaking?
Request a free speed audit and we'll identify exactly what's holding your scores back.