CSS Minifier vs Uglifier vs Tree-Shaking

Last reviewed 2026-04-27. Open the CSS minifier for in-browser minification without uploading the source.

Minifier - whitespace and comments

The simplest tactic: take 10 KB of formatted CSS or JS and strip every space, newline, and comment that does not affect parsing. The output works identically to the input but takes 30-50% less space. This is what the CSS minifier does for stylesheets.

Modern CSS minifiers go further than whitespace: collapse 0px to 0, replace #ffffff with #fff, remove redundant default values, merge adjacent selectors with identical rules. Each one shaves a small percentage; the cumulative effect is meaningful.

Uglifier - rename to save bytes

Specific to JavaScript. Takes const calculateMonthlyTotal = ... and renames it to const a = .... The shorter name is smaller. Repeated across thousands of identifiers, the savings stack.

Uglifier requires understanding the code's scope rules - you can rename a local variable freely, but renaming a global breaks anything that depends on the name. Tools like Terser, esbuild, and SWC do this safely by analyzing the scope graph.

For CSS, the equivalent is renaming class names. Build pipelines that hash CSS classes to .a, .b, .c save bytes the same way - but only work when the HTML is built with the same pipeline so the references match.

Tree-shaking - delete what nothing uses

The big one. When you import a library and use one function out of fifty, naive bundling ships all fifty. Tree-shaking analyzes the import graph and includes only the functions actually called by your app's entry point. Forty-nine functions disappear from the output bundle.

Tree-shaking requires the source code to be in a format that supports the analysis - native ES modules ("import" / "export") rather than CommonJS ("require"). Library authors have spent years migrating to ESM specifically to make tree-shaking effective for their consumers.

For CSS, tree-shaking has a parallel called PurgeCSS or TailwindCSS's JIT mode: scan the HTML and only include CSS rules that match an actual class name in the markup. Tailwind ships with thousands of utility classes; the production build includes only the ones in use.

What to reach for first

Use all three when the build pipeline supports them. The order: tree-shake first (eliminates the biggest chunks), then minify and uglify the result. Modern bundlers (Vite, esbuild, Rollup, Webpack 5+) do all three in one pass with a single config flag.

For a non-bundled project where you just want a smaller stylesheet, run the CSS minifier on the final CSS. For broader content on these techniques, see CSS minifier vs compressor or how to minify CSS and JS for Cloud Run cold start. The full set: developer tools hub.