GigaCode logo GigaCode

Developer tools, fast and local, because your privacy matters.

QR Code Generator CPF/CNPJ Generator JSON Formatter & Validator Fluff text generator JWT Decoder SQL Formatter Text diff CSS Units Converter Base64 Encoder/Decoder SVG to PNG or JPEG converter JPG/PNG ↔ WebP converter Image resizer Grayscale image filter

JavaScript minifier

Simple comment/whitespace removal. Does not replace Terser/esbuild in real builds.

{{ t("sizeBefore") }}: {{ minifyJs.beforeSize }}
{{ t("sizeAfter") }}: {{ minifyJs.afterSize }}
{{ t("sizeReduction") }}: {{ minifyJs.reduction }}
Quer o oposto disso? Deixar o JavaScript fácil de compreender? Veja JavaScript beautifier.

Overview

JavaScript is, today, the most widely distributed language in the world — in a very literal sense. Every time a user opens a web page, the browser downloads, parses, and executes .js files that traveled from a server hundreds or thousands of kilometers away. The historical irony is that Brendan Eich created JavaScript in 10 days to handle small animations and form validations. Nobody imagined that, three decades later, files of hundreds of kilobytes would be the norm, and that an entire industry of build tools would exist just to compress them.

Minification is not just removing spaces and comments — though that is a valid starting point. Advanced tools like Terser and esbuild go much further: they rename local variables from descriptive names like `isUserLoggedIn` to `a`, eliminate dead code (functions declared but never called), inline small functions, and even substitute `true` with `!0` and `false` with `!1` because those literals are shorter. The result can be a file 40% to 70% smaller than the original — and that is before applying gzip or brotli on the server.

This page's tool implements basic minification: removes line and block comments, eliminates unnecessary spaces and tabs, and collapses line breaks. That is enough to understand the impact of minification, run quick tests, and compare sizes. For production builds with variable renaming, tree shaking, and code splitting, the path is to use Vite, webpack, Rollup, or esbuild integrated into your pipeline. No online tool replaces that — and it would be naive to try.

Technical deep dive

Why variable renaming shrinks files so dramatically

  • Mangling (variable renaming) is the most powerful technique in advanced minification. A variable named `isUserAuthenticatedAndActive` has 31 characters; renamed to `a`, it becomes 1. Multiplied across hundreds of occurrences, the savings are enormous.
  • Dead code elimination: functions declared but never referenced are simply removed. Terser analyzes the call graph and discards everything that can never be reached at runtime.
  • Function inlining: if a function contains only a single `return` with a simple expression, the compiler can replace each call site with the function body, eliminating function-call overhead in the final bundle.
  • Tree shaking is dead code elimination at the module level. When you import only `{ debounce }` from a library, modern bundlers like Rollup and esbuild discard everything else from the library in the output bundle.
  • Literal substitutions: `true` becomes `!0` (2 characters vs. 4), `false` becomes `!1`, `undefined` becomes `void 0`. These are micro-optimizations, but in a file with thousands of occurrences they make a measurable difference.

The evolution of tools: from JSMin to esbuild

  • JSMin (Douglas Crockford, 2003) was the first widely used minifier. It only removed comments and whitespace — no mangling, no semantic analysis. That was sufficient for the web of 2003.
  • Packer (Dean Edwards, 2004) took a different approach: it compressed JavaScript using Base62 encoding and added inline decompression code. It produced smaller files but added CPU overhead at parse time. It became obsolete as HTTP compression algorithms improved.
  • YUI Compressor (Yahoo, 2008) introduced real semantic analysis with local variable renaming. It was the state of the art for years, but slow due to its Java foundation.
  • UglifyJS (2010) brought speed and the Node.js ecosystem. For years it was the de facto standard for minification with mangling. Terser is a maintained fork of UglifyJS with ES2015+ support and is still the default choice in webpack today.
  • esbuild (Evan Wallace, 2020) rewrote the problem in Go. It is 10x to 100x faster than earlier tools because it processes files in parallel and avoids the Node.js VM overhead. SWC (Rust) follows the same philosophy and is used internally by Next.js.

Tool guide

  • What JavaScript is The scripting language of browsers and Node; source often has comments and spaces for readability.

  • What the minifier does Strips comments and extra whitespace conservatively.

  • Why use it Quick size experiments. Production should use bundlers (Terser, esbuild, etc.) with tree-shaking and tests.

This chapter in the full guide All tools guide

Code Snippets

What this basic minifier does (illustrative regex)
// Remove single-line comments
const noLineComments = code.replace(/\/\/.*$/gm, '');

// Remove block comments
const noBlockComments = noLineComments.replace(/\/\*[\s\S]*?\*\//g, '');

// Collapse whitespace
const minified = noBlockComments
  .replace(/[ \t]+/g, ' ')
  .replace(/\n\s*\n/g, '\n')
  .trim();

// Result: smaller file, no variable mangling
// For real mangling, use Terser or esbuild
Advanced minification with Terser (Node.js API)
import { minify } from 'terser';

const code = `
function calculateDiscount(originalPrice, percentage) {
  const factor = percentage / 100;
  return originalPrice * (1 - factor);
}
`;

const result = await minify(code, {
  compress: {
    dead_code: true,
    drop_console: true,
  },
  mangle: {
    toplevel: true, // also renames top-level variables
  },
  format: {
    comments: false,
  },
});

console.log(result.code);
// Approximate output: function n(n,c){return n*(1-c/100)}

Before 

function hello() {
  // comentário
  return 1;
}

FAQ

What is this tool for?

It runs fully in your browser: useful to validate, format, or convert data in everyday development.

Are my inputs sent to a server?

Processing happens locally with JavaScript. We do not store what you paste into the text areas.

Can I use this for real production data?

Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.

GigaCode global FAQ