Does this minifier work for both JS and CSS?

Yes. Use the JS and CSS toggle to switch between modes. JavaScript minification removes comments and whitespace. CSS minification additionally shortens hex colours and removes redundant semicolons.

Is the minified code safe to use?

Yes for straightforward code. This is a basic minifier that removes whitespace and comments. For production use with complex frameworks, consider a full build tool like webpack or esbuild which also tree-shake and bundle.

How much size reduction can I expect?

Typical reduction is 20-40% for well-commented code, and 10-20% for already-compact code. The main gains come from removing whitespace and comments. For maximum compression, combine with gzip which typically achieves another 60-70% on top.

JS & CSS Minifier — Minify JavaScript and CSS Online

Paste your code

0 bytes

About the JS & CSS Minifier

Minification reduces JavaScript and CSS file size by removing all whitespace, comments, and unnecessary characters without changing how the code works. A well-minified JavaScript file is typically 30-60% smaller than the original source. For CSS, reductions of 20-40% are common. Smaller files load faster, consume less bandwidth, and improve Core Web Vitals scores.

What minification removes

Whitespace — all spaces, tabs, and newlines between tokens
Comments — both inline (//) and block (/* */) comments are stripped
Redundant syntax — trailing semicolons, unnecessary quotes, zero-unit values (0px becomes 0)
Variable renaming — advanced minifiers rename local variables to single letters, reducing code size further

Minification vs compression vs bundling

Minification reduces source code size on disk. Gzip/Brotli compression further reduces the transferred size over HTTP. Bundling combines multiple files into one to reduce HTTP requests. For production, apply all three: bundle files, minify the result, and serve with compression. Together they can reduce JS payload by 80-90%.

Source maps for debugging minified code

When minified code throws an error in production, source maps let you trace it back to the original source. A source map is a JSON file that maps minified variable names and line numbers back to the readable source. Browser DevTools load source maps automatically if they are available, showing the original code in the debugger and call stack.

Generating source maps — Terser: add --source-map flag; webpack: set devtool: "source-map"
Uploading to error trackers — Sentry, Bugsnag accept source maps for readable production error stack traces
Serving source maps — source maps can be served publicly (convenient) or uploaded only to error trackers (more secure)
X-SourceMap header — alternatively reference the source map from within the minified file via a comment at the end

Frequently Asked Questions

What is the difference between minification and uglification?

Minification removes whitespace and comments while keeping variable names intact. Uglification also renames variables to single characters, making code smaller but unreadable. Most modern tools like Terser do both automatically, though the terms are often used interchangeably.

Will minification break my code?

Correctly written code minified by a standards-compliant tool will not change behaviour. Code that relies on whitespace (rare) or uses deprecated patterns like with statements may have issues. Always test minified output before deploying and keep source files under version control.

Should I minify files during development?

No. Minified code is impossible to debug. Use source maps in production to map minified code back to original sources for error reporting. Run minification only in your production build pipeline, never on the files you edit directly.

How much does minification reduce file size?

Typical reductions are 30-50% for JavaScript and 20-40% for CSS. Combined with gzip compression on the server, the total transferred size reduction is often 75-85%. A 100KB uncompressed JS file may transfer as 15-25KB after minification and compression.

How do I minify JavaScript from the command line?

Using npm: npx terser input.js -o output.min.js --compress --mangle. For CSS: npx cssnano input.css output.min.css. In webpack, use TerserPlugin. In Vite and Next.js, minification runs automatically when building for production.