Minifier & Déminifier votre JavaScript en ligne — Outil JS gratuit
Minifiez, déminifiez et beautifiez votre code JavaScript instantanément. Notre minificateur JavaScript gratuit en ligne réduit la taille de vos fichiers JS de 30 à 70% en moyenne, améliorant les performances de vos pages web. Traitement 100% côté client, aucune donnée n'est envoyée à nos serveurs.
Loading...
Minification JavaScript
Minifiez, déminifiez et beautifiez votre code JavaScript avec Terser. Outil gratuit en ligne pour optimiser, compresser et formater votre JavaScript.
Fonctionnalités
Notre outil JavaScript offre trois fonctionnalités principales :
Minifier
Réduisez la taille de votre code JavaScript en supprimant les espaces, commentaires et caractères inutiles.
Déminifier
Restaurez la lisibilité de votre code JavaScript minifié en ajoutant des espaces et des retours à la ligne.
Beautifier
Formatez et beautifiez votre code JavaScript avec une indentation personnalisable (2 ou 4 espaces, ou tabs).
Package utilisé
Terser
v5.24.0
Terser est un compresseur JavaScript moderne qui optimise la taille et les performances de votre code.
Exemple de base
Code d'entrée
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));
Code minifié
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));
Options de minification
Version ECMAScript
Définit la version ECMAScript cible pour la minification (ES5, ES2015, ES2017, ES2020, ES2022)
Exemples par version ECMAScript :
Code original (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)
Niveau de compression
Contrôle l'agressivité de la compression (conservative, normal, aggressive)
ConservativeConservateur - Compression minimale, plus sûr
NormalNormal - Équilibre entre taille et compatibilité
AggressiveAgressif - Compression maximale, peut casser certains codes
Exemples de compression :
Code original
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}
Préserver les noms de classes
Conserve les noms de classes CSS dans les chaînes de caractères
Comparaison avec/sans l'option :
Code original
element.className = 'my-class';
element.setAttribute('class', 'another-class');
Avec preserveClassNames: true
element.className='my-class';element.setAttribute('class','another-class')
Avec preserveClassNames: false
element.className='a';element.setAttribute('class','b')
Différence
Les noms de classes CSS sont préservés dans les chaînes
Préserver les noms de fonctions
Conserve les noms de fonctions pour le debugging
Comparaison avec/sans l'option :
Code original
function myFunction() {
return true;
}
const obj = { myMethod() { return false; } };
Avec preserveFunctionNames: true
function myFunction(){return!0}const obj={myMethod(){return!1}}
Avec preserveFunctionNames: false
function a(){return!0}const obj={b(){return!1}}
Différence
Les noms de fonctions sont préservés pour le debugging
Supprimer console
Supprime tous les appels console.log, console.warn, etc.
Comparaison avec/sans l'option :
Code original
console.log('Debug info');
console.warn('Warning message');
const result = calculateTotal(items);
console.log('Result:', result);
return result;
Avec removeConsole: true
const result=calculateTotal(items);return result
Avec removeConsole: false
console.log('Debug info');console.warn('Warning message');const result=calculateTotal(items);console.log('Result:',result);return result
Différence
Tous les appels console.* sont supprimés
Supprimer debugger
Supprime les instructions debugger du code
Comparaison avec/sans l'option :
Code original
if (condition) {
debugger;
return true;
}
function test() {
debugger;
return false;
}
Avec removeDebugger: true
if(condition)return!0;function test(){return!1}
Avec removeDebugger: false
if(condition){debugger;return!0}function test(){debugger;return!1}
Différence
Les instructions debugger sont supprimées
Options de Beautify
Options pour formater et beautifier le JavaScript (uniquement pour Beautify, pas pour Minify/Unminify)
Taille d'indentation
Définit le nombre d'espaces ou de tabs pour l'indentation lors du Beautify
Code original
function test(){return true;}
Avec 2 espaces
function test() {
return true;
}
Avec 4 espaces
function test() {
return true;
}
Différence
L'indentation est personnalisable uniquement pour Beautify. Unminify utilise toujours 2 espaces.
Type d'indentation
Utilise des espaces ou des tabs pour l'indentation lors du Beautify
Code original
function test(){return true;}
Avec espaces
function test() {
return true;
}
Avec tabs
function test() {
return true;
}
Différence
Les espaces sont plus standards, les tabs peuvent être préférés selon vos conventions de code.