JavaScript Minifier

How to Use the JavaScript Minifier

1. Paste your JavaScript code into the input textarea.
2. Click Minify JavaScript to process the code.
3. View the compression stats showing original size, minified size, and percentage saved.
4. Click Copy to copy the minified code, or Download to save it as a .min.js file.

About JavaScript Minification

JavaScript minification is an essential step in web optimization. Modern websites rely heavily on JavaScript, and unminified code contains comments, whitespace, and formatting that are helpful for developers but unnecessary for browsers. By removing these non-functional characters, minification reduces the amount of data that needs to be transferred over the network.

This tool performs basic minification by stripping single-line comments (//), multi-line comments (/* */), and collapsing unnecessary whitespace. It preserves strings and regular expressions to avoid breaking your code. For production deployments requiring advanced optimizations such as variable shortening, tree shaking, and dead code elimination, consider using full-featured tools like Terser, UglifyJS, or webpack with the appropriate plugins.

JavaScript Minification Examples

These examples demonstrate the different levels of JavaScript optimization, from basic minification (what this tool does) to advanced uglification.

Comment and Whitespace Removal (Basic Minification)

// Before - 210 characters
/**
 * Calculate the area of a circle
 * @param {number} radius
 * @returns {number}
 */
function circleArea(radius) {
  // PI * r^2
  return Math.PI * radius * radius;
}

// After - 56 characters
function circleArea(radius){return Math.PI*radius*radius}

Variable Shortening (Advanced Uglification)

// Before
function calculateTotal(items, taxRate) {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * taxRate;
  return subtotal + tax;
}

// After uglification (Terser)
function calculateTotal(t,a){const e=t.reduce((t,a)=>t+a.price,0);return e+e*a}

Dead Code Elimination

// Before
function process(debug) {
  if (false) {
    console.log("This never runs");
  }
  return "result";
}

// After (dead code removed by Terser)
function process(s){return"result"}

String Concatenation in Template Literals

// Before
const greeting = "Hello, " + firstName + " " + lastName + "!";
const url = baseUrl + "/api/users/" + userId + "/profile";

// These strings are preserved as-is during minification
// Only surrounding whitespace and comments are removed

JavaScript Optimization Reference

This table compares different levels of JavaScript optimization, from basic minification to full production optimization.

Typical Savings for Common Libraries

Why JavaScript Minification Is Critical for Web Performance

JavaScript is often the largest contributor to page weight on modern websites. Unlike CSS, which is render-blocking, JavaScript is both parser-blocking and execution-blocking. When the browser encounters a script tag, it must download the file, parse the code, compile it to bytecode, and execute it before proceeding. Every kilobyte of JavaScript adds to each of these steps, directly impacting Time to Interactive (TTI) and Total Blocking Time (TBT) -- two critical Core Web Vitals metrics.

On mobile devices, the impact is compounded. A 500 KB JavaScript bundle that takes 0.2 seconds to parse on a modern desktop might take 2-3 seconds on a mid-range mobile phone. This is not just a transfer time issue; the CPU time required to parse and compile JavaScript is often the larger bottleneck. Minification reduces the amount of text the parser must process, and combined with server-side compression (Gzip or Brotli), can reduce transfer sizes by 80% or more.

Professional JavaScript minification goes far beyond removing whitespace. Advanced tools like Terser perform scope analysis to safely rename variables to single-character names, evaluate constant expressions at build time, eliminate dead code paths, and inline small functions. This tool on Toolsium focuses on the safe basics: removing comments and collapsing whitespace, which alone can reduce file size by 20-40%. For production deployments requiring maximum optimization, integrate a full-featured minifier like Terser or esbuild into your build pipeline.

Frequently Asked Questions