Technical Documentation

Detailed guide to the packages used for conversions and all available options with explanations of their impact on the conversion process

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));

Test this JavaScript example JavaScript optimization guide

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

Ready to optimize your code?

Now that you understand our tools and options, it's time to put them into practice.

Start minifying your code Read optimization guides Learn about our approach