DEV Community

Sarfaraz
Sarfaraz

Posted on

How to Minify JavaScript, CSS, and JSON (Free, No Build Step)

Minification is one of those things everyone knows they should do
before shipping to production, but reaching for a full build pipeline
just to shrink one file is overkill. Here's what minification actually
does, and a quick way to do it without setting up tooling.

What minification actually removes

Minifying JS, CSS, or JSON strips out everything that doesn't affect
how the code runs:

  • Whitespace and indentation
  • Line breaks
  • Comments
  • Sometimes: shortening variable names (depending on the minifier)

It does not rename things to make code unreadable — that's
obfuscation, a different (and often unnecessary) step.

Example: before and after

\css
/* Primary button style */
.button {
background-color: #1a73e8;
padding: 12px 24px;
border-radius: 6px;
}
\
\

becomes:

\css
.button{background-color:#1a73e8;padding:12px 24px;border-radius:6px}
\
\

Same rendering, smaller payload. Multiply that across every CSS and
JS file on a page and the savings add up, especially on mobile
connections.

When you don't want a full build pipeline

If you're working on a small script, a one-off snippet, or you just
want to shrink a JSON payload before sending it somewhere with a size
limit, spinning up webpack or a CLI minifier is a lot of setup for a
small task. For that, I built a browser-based
JS, CSS & JSON Minifier
paste code in, get minified output back, nothing leaves your browser.

JSON minification specifically

This one's less talked about but genuinely useful: if you're storing
JSON in a URL query parameter, a database TEXT column with a size cap,
or a config value with strict limits, minifying it (stripping
whitespace between keys/values) can meaningfully reduce size without
changing the data at all.

Quick reference

Language What gets removed Tool
CSS Whitespace, comments, line breaks Minifier
JavaScript Whitespace, comments, line breaks Minifier
JSON Whitespace, line breaks Minifier

Part of a free set of 30 browser-based dev tools
if you want the rest of the toolbox.

Top comments (0)