PageSpeed Matters
    Speed Audit
    Let's Talk
    PageSpeed Matters
    Book a Call
    Optimization Techniques · Glossary

    Minification / Tree Shaking · Definition & Explanation 2026

    Minification and tree shaking are two complementary build-time optimizations that dramatically reduce JavaScript and CSS file sizes. Minification strips unnecessary characters (whitespace, comments, long variable names) for a 20–60% reduction. Tree shaking eliminates unused code exports for a 30–60% reduction.

    Combined with Brotli compression, these techniques can reduce the total transfer from unminified source to network bytes by over 90%. Modern bundlers like Vite and Webpack apply both by default in production builds, but understanding how they work is essential for debugging bundle size issues.

    Updated 2026-02-28
    M
    By Matt Suffoletto

    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

    Yes — minified code is unreadable. Use source maps (.map files) to map minified code back to original source for debugging. Source maps are generated by default in most bundlers.

    Tree shaking only works with ES module syntax (import/export). CommonJS (require/module.exports) can't be statically analyzed. Also, modules with side effects (code that runs on import) can't be safely removed.

    Minification removes unnecessary characters at build time (permanent). Compression (Brotli/Gzip) reduces transfer size at serve time (decompressed by browser). Apply both: minify first, then compress.

    Struggling with Minification / Tree Shaking?

    Request a free speed audit and we'll identify exactly what's holding your scores back.

    Request An Audit