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
Using Terser to optimize and compress JavaScript code
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