How to minify CSS and JavaScript without a build tool

Modern build tools — Webpack, Vite, Rollup, esbuild, Parcel — handle minification automatically as part of a production build pipeline. If you're already using one of these, you're covered. Minification just happens.

But a lot of real-world projects don't have a build pipeline. A WordPress theme. A static HTML page with a couple of external scripts. A quick internal tool. A legacy codebase that predates bundlers. A client site where you've been handed raw .css and .js files to optimise before deployment.

In these situations, you don't need to install Node.js, configure a bundler, or learn a new tool. Minification is a mechanical process — remove whitespace, shorten variable names, strip comments — and it can be done in several ways without touching your project's build setup. This guide covers all of them.

What minification actually does

Minification reduces file size by removing content that browsers don't need to interpret the code:

• Whitespace and newlines — browsers parse color:red and color: red identically. The spaces and indentation in your source file are for humans, not engines.
• Comments — /* This styles the header */ means nothing to a CSS parser at runtime.
• Redundant semicolons — in CSS, the last declaration before } doesn't need a semicolon.
• Shorter names — in JavaScript, a local variable called buttonClickHandler can become a without changing behaviour (this is the most aggressive optimisation, sometimes called "mangling").
• Dead code elimination — some minifiers also strip unreachable code paths, though this overlaps with tree-shaking rather than pure minification.

The size savings depend on how verbose your original source is, but a rough order of magnitude:

File type	Typical minification saving
Uncompressed CSS	20–40% smaller
Uncompressed JavaScript	30–60% smaller
CSS + gzip (after minification)	60–80% smaller than original
JS + gzip (after minification)	65–85% smaller than original

Minification and gzip/Brotli compression are complementary — minified files compress better because removing repetitive whitespace also removes patterns that compression algorithms can't exploit as efficiently.

Option 1: Browser-based minifier (no installation, no pipeline)

The fastest option for a one-off file or a project without a build step is a browser-based minifier — paste your CSS or JavaScript, copy the output, done. Reputable options include cssnano Playground for CSS and the Terser REPL for JavaScript. Both process your code client-side without uploading it to a server — relevant when you're minifying production code containing proprietary logic, API endpoints, or internal selectors.

When this is the right choice:

• You need to minify a file once and don't need automation
• You're working with a third party's file and need a quick size reduction
• You're comparing the minified output of different tools to see which produces the smallest result
• You're on a machine where you can't install Node.js (client machines, locked-down corporate laptops)

Workflow: paste → minify → copy → save to file.min.css / file.min.js.

For CSS specifically, cssnano handles:

• Collapsing shorthand properties (margin: 0 0 0 0 → margin: 0)
• Removing vendor prefixes that are no longer necessary for your target browsers
• Merging duplicate selectors

Option 2: Command-line tools (no bundler required)

If you want a repeatable process without a full build pipeline, lightweight CLI tools handle minification with a single command.

CSS: csso or clean-css-cli

# Install once
npm install -g csso-cli

# Minify
csso input.css --output output.min.css

Or with clean-css-cli:

npm install -g clean-css-cli
cleancss -o output.min.css input.css

Both produce standards-compliant minified CSS. clean-css has been around since 2012, is well-maintained on GitHub, and is what many build tools use internally — you're using the same engine without the bundler wrapper.

JavaScript: terser

Terser is the de-facto standard for JavaScript minification. It handles ES2020+ syntax, supports source maps, and is what esbuild and Vite use under the hood for their own minification.

# Install once
npm install -g terser

# Minify (whitespace only, safe)
terser input.js --compress --output output.min.js

# Minify + mangle variable names (maximum compression)
terser input.js --compress --mangle --output output.min.js

The --mangle flag renames local variables to single characters. This is safe for self-contained scripts but can break code that relies on function names being preserved (some libraries use Function.name for debugging). If you're unsure, start without --mangle and add it only if you're confident in your test coverage.

HTML: html-minifier-terser

npm install -g html-minifier-terser
html-minifier-terser --collapse-whitespace --remove-comments \
  --minify-css true --minify-js true index.html -o index.min.html

The --minify-css and --minify-js flags apply inline CSS and JavaScript minification as well.

Option 3: Editor plugins (minify on save or on demand)

If you want minification without a separate terminal step, most editors have plugins that minify on demand.

VS Code:

• Minify (HookyQR) — right-click any .css or .js file → Minify. Saves output as file.min.css / file.min.js alongside the original.
• CSS Minifier (Roksana Karim) — CSS-focused, adds a status bar button.

Sublime Text:

• Minify (tssajo) — Ctrl+Alt+M to minify the current file.

Vim / Neovim:

• Run terser or csso as external commands: :!terser % --compress --output %:r.min.js

Editor plugins are useful for workflows where you're editing files directly on the server or in a simple project where adding a package.json build script would be overkill.

Option 4: npm scripts (lightweight pipeline without a bundler)

If your project already has a package.json but you don't want to configure Webpack or Vite, an npm script is the lightest possible pipeline:

{
  "scripts": {
    "minify:css": "cleancss -o public/style.min.css src/style.css",
    "minify:js": "terser src/app.js --compress --mangle --output public/app.min.js",
    "minify": "npm run minify:css && npm run minify:js"
  },
  "devDependencies": {
    "clean-css-cli": "^5.6.3",
    "terser": "^5.31.0"
  }
}

Run npm run minify before each deployment. Two commands, no bundler config, no plugins.

This scales well: add a minify:css:vendor script for third-party CSS files, chain them with &&, done. You get a repeatable process that any team member can run without understanding a full build system.

Option 5: Makefile (zero Node.js dependency)

If you want a build step without Node.js at all, a Makefile works cleanly for projects served from any backend:

CSS_SRC = src/style.css
CSS_OUT = public/style.min.css
JS_SRC  = src/app.js
JS_OUT  = public/app.min.js

all: $(CSS_OUT) $(JS_OUT)

$(CSS_OUT): $(CSS_SRC)
	csso $< --output $@

$(JS_OUT): $(JS_SRC)
	terser $< --compress --mangle --output $@

make only rebuilds a file if its source has changed (based on timestamps), so make is a no-op after the first build until you edit a source file. This is the original build system and still works perfectly for this use case.

Verifying the output

After minifying, check three things:

1. Size reduction. Compare file sizes before and after:

ls -lh input.css output.min.css

A 30% reduction on a typical stylesheet is reasonable. If you're seeing less than 10%, the file was probably already fairly compact.

2. Visual and functional correctness. Load the minified version in your browser and check that the page renders correctly. CSS minifiers occasionally collapse declarations in ways that change specificity — rare, but worth a quick visual check.

3. JavaScript correctness. Run your test suite against the minified output if you have one. With --mangle enabled, property access bugs can surface if your code relied on a function or variable name being preserved. The most common issue: code that uses eval() or accesses variables by string name (window['myVar']) can break with aggressive mangling. Terser handles this with --mangle-props configuration if needed.

Serving minified files

For the minified files to actually improve load time, your server needs to serve them. A few patterns:

Separate file names: Reference style.min.css and app.min.js directly in your HTML. Simple, explicit, works everywhere.

Conditional serving based on query string: Some setups serve style.css?v=min and route it to the minified version at the server level. Useful if you want to keep the same URL.

Gzip or Brotli compression at the server level: Minification + server-side compression is the standard combination. In nginx:

gzip on;
gzip_types text/css application/javascript;
gzip_min_length 1000;

In Apache:

AddOutputFilterByType DEFLATE text/css application/javascript

Most modern hosting platforms (Vercel, Netlify, Cloudflare Pages) apply Brotli compression automatically to static assets. If you're already on one of these, your minified files are compressed transparently.

Source maps: keeping debuggability

If you minify production code and need to debug production errors, generate a source map:

terser src/app.js --compress --mangle \
  --source-map "url='app.min.js.map'" \
  --output public/app.min.js

The .map file links minified line/column positions back to your original source. Browser DevTools load it automatically if the file is accessible. You can host the source map publicly (the original source is referenced but not embedded) or serve it only to internal users via access controls.

csso also supports source maps:

csso input.css --output output.min.css --source-map output.min.css.map

---

Harshil writes about privacy-first tools, developer productivity, and the trade-offs between browser-based and uploaded utilities.

---

Sources & methodology

• clean-css GitHub repository — maintained CSS minifier; changelog and benchmark data
• Terser documentation — official Terser option reference; --compress, --mangle, and source map configuration
• MDN Web Docs — HTTP compression — gzip/Brotli interaction with minified assets; server configuration examples
• Size reduction figures cited ("20–40% for CSS", "30–60% for JS") are typical ranges based on general industry benchmarks; actual savings depend heavily on how verbose the original source is — measure your own files for accurate numbers

Last reviewed: 2026-05-14. Minification tooling is stable; specific CLI flags verified against terser v5 and clean-css v5.