Minify, Unminify & Beautify JavaScript Online — Free JS Minifier
Minify, unminify and beautify your JavaScript code instantly. Our free online JavaScript minifier reduces your JS file sizes by 30 to 70% on average, improving your web page loading times. 100% client-side processing, no data is sent to our servers.
Loading...
JavaScript Minification
Minify, unminify and beautify your JavaScript code with Terser. Free online tool to optimize, compress and format your JavaScript.
Features
Our JavaScript tool offers three main features:
Minify
Reduce the size of your JavaScript code by removing spaces, comments and unnecessary characters.
Unminify
Restore the readability of your minified JavaScript code by adding spaces and line breaks.
Beautify
Format and beautify your JavaScript code with customizable indentation (2 or 4 spaces, or tabs).
Package used
Terser
v5.24.0
Terser is a modern JavaScript compressor that optimizes the size and performance of your code.
Basic example
Input code
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
const products = [
{ name: 'Laptop', price: 999 },
{ name: 'Mouse', price: 25 }
];
console.log('Total:', calculateTotal(products));
Minified code
function calculateTotal(t){let e=0;for(let o=0;o<t.length;o++)e+=t[o].price;return e}const products=[{name:"Laptop",price:999},{name:"Mouse",price:25}];console.log("Total:",calculateTotal(products));
Minification options
ECMAScript Version
Defines the target ECMAScript version for minification (ES5, ES2015, ES2017, ES2020, ES2022)
Examples by ECMAScript version:
Original code (ES2022)
const data = { name: 'test' };
const { name } = data;
console.log(name);
ES2022
const{name:data}=data;console.log(data)
ES5
var data={name:'test'};var name=data.name;console.log(name)
Compression Level
Controls the aggressiveness of compression (conservative, normal, aggressive)
ConservativeConservative - Minimal compression, safer
NormalNormal - Balance between size and compatibility
AggressiveAggressive - Maximum compression, may break some code
Compression examples:
Original code
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
Conservative
function calculateTotal(items){let total=0;for(let i=0;i<items.length;i++)total+=items[i].price;return total}
Normal
function calculateTotal(t){let e=0;for(let l=0;l<t.length;l++)e+=t[l].price;return e}
Aggressive
function e(e){let t=0;for(let n=0;n<e.length;n++)t+=e[n].price;return t}
Preserve Class Names
Preserves CSS class names in string literals
Comparison with/without option:
Original code
element.className = 'my-class';
element.setAttribute('class', 'another-class');
With preserveClassNames: true
element.className='my-class';element.setAttribute('class','another-class')
With preserveClassNames: false
element.className='a';element.setAttribute('class','b')
Difference
CSS class names are preserved in strings
Preserve Function Names
Preserves function names for debugging
Comparison with/without option:
Original code
function myFunction() {
return true;
}
const obj = { myMethod() { return false; } };
With preserveFunctionNames: true
function myFunction(){return!0}const obj={myMethod(){return!1}}
With preserveFunctionNames: false
function a(){return!0}const obj={b(){return!1}}
Difference
Function names are preserved for debugging
Remove Console
Removes all console.log, console.warn, etc. calls
Comparison with/without option:
Original code
console.log('Debug info');
console.warn('Warning message');
const result = calculateTotal(items);
console.log('Result:', result);
return result;
With removeConsole: true
const result=calculateTotal(items);return result
With removeConsole: false
console.log('Debug info');console.warn('Warning message');const result=calculateTotal(items);console.log('Result:',result);return result
Difference
All console.* calls are removed
Remove Debugger
Removes debugger statements from code
Comparison with/without option:
Original code
if (condition) {
debugger;
return true;
}
function test() {
debugger;
return false;
}
With removeDebugger: true
if(condition)return!0;function test(){return!1}
With removeDebugger: false
if(condition){debugger;return!0}function test(){debugger;return!1}
Difference
Debugger statements are removed
Beautify Options
Options for formatting and beautifying JavaScript (Beautify only, not for Minify/Unminify)
Indentation Size
Sets the number of spaces or tabs for indentation during Beautify
Original code
function test(){return true;}
With 2 spaces
function test() {
return true;
}
With 4 spaces
function test() {
return true;
}
Difference
Indentation is customizable only for Beautify. Unminify always uses 2 spaces.
Indentation Type
Use spaces or tabs for indentation during Beautify
Original code
function test(){return true;}
With spaces
function test() {
return true;
}
With tabs
function test() {
return true;
}
Difference
Spaces are more standard, tabs may be preferred according to your code conventions.