Déminifier & Minifier JavaScript en ligne — Beautifier JS gratuit

Déminifiez, minifiez et beautifiez du code JavaScript instantanément avec notre outil gratuit en ligne. Restaurez un formatage lisible, minifiez pour la production ou concaténez plusieurs fichiers. Tout le traitement se fait dans votre navigateur.

ECMAScript

Compression

Remove console

Remove debugger

Beautify Options (Beautify only)

Indentation

Indent type

Partager cet outil:

Entrée

Loading editor...

Sortie

Loading editor...

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

Guide d'optimisation JavaScript

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.

Comment déminifier du JavaScript en ligne

La déminification JavaScript (aussi appelée beautification ou formatage) restaure un formatage lisible au code compressé. Collez n'importe quel JavaScript minifié dans notre outil, et il ajoutera une indentation appropriée, des sauts de ligne et des espaces. C'est essentiel pour déboguer du code en production, comprendre des scripts tiers ou examiner des bibliothèques obfusquées. Notre outil préserve toutes les fonctionnalités tout en rendant le code lisible.

Beautifier JavaScript vs Déminificateur — Quelle différence

Les deux termes désignent le fait de rendre du code minifié lisible, avec des différences subtiles. Un beautifier applique des règles de formatage cohérentes (style d'indentation, placement des accolades) à n'importe quel code. Un déminificateur cible spécifiquement le code minifié pour restaurer la structure supprimée lors de la compression. Notre outil gère les deux — collez votre code et cliquez sur Déminifier ou Beautifier selon vos besoins.

Concaténer des fichiers JavaScript

Combiner plusieurs fichiers JavaScript en un seul réduit les requêtes HTTP et peut améliorer les performances de chargement. Utilisez notre fonction de concaténation pour fusionner plusieurs fichiers JS, puis optionnellement minifier le résultat pour une compression maximale. C'est particulièrement utile pour les projets qui n'utilisent pas de bundler comme Webpack ou Rollup.

Questions fréquemment posées

Tout ce que vous devez savoir sur la minification, déminification et beautification JavaScript

Pourquoi minifier du JavaScript ?

La minification JavaScript réduit la taille des fichiers en supprimant les espaces, commentaires et en raccourcissant les noms de variables. Cela améliore les temps de chargement et réduit les coûts de bande passante. Les réductions typiques vont de 30% à 70%.

Comment fonctionne la minification JavaScript ?

Notre outil utilise Terser, le compresseur JavaScript standard de l'industrie. Il supprime les espaces, commentaires et caractères inutiles tout en réduisant optionnellement les noms de variables. Le code minifié est fonctionnellement identique à l'original.

Puis-je déminifier du code JavaScript ?

Oui, collez n'importe quel JavaScript minifié dans notre outil et cliquez sur Déminifier. L'outil restaure l'indentation et le formatage pour rendre le code lisible. Notez que les noms de variables raccourcis lors de la minification ne peuvent pas être restaurés.

Mon code est-il traité de manière sécurisée ?

Tout le traitement JavaScript se fait entièrement dans votre navigateur. Aucun code n'est envoyé à un serveur. Votre code source reste totalement privé et sécurisé.

Quelle est la différence entre minifier et beautifier ?

La minification compresse le code en supprimant tous les caractères inutiles pour réduire la taille. La beautification (ou formatage) ajoute une indentation et des espaces cohérents pour rendre le code lisible. Ce sont des opérations opposées — notre outil supporte les deux.

Quelle réduction de taille puis-je espérer ?

Les réductions typiques vont de 30% à 70% selon le style du code et la densité des commentaires. Le code avec beaucoup de commentaires et de longs noms de variables verra des réductions plus importantes. Notre outil affiche le ratio de compression exact après traitement.

Puis-je concaténer des fichiers JavaScript ?

Oui, utilisez notre fonction de concaténation pour fusionner plusieurs fichiers JavaScript en un seul. Vous pouvez ensuite minifier le résultat combiné pour une réduction maximale. Cliquez sur le bouton de concaténation dans la barre d'outils pour commencer.

Quelles versions de JavaScript sont supportées ?

Notre outil supporte tout le JavaScript moderne incluant ES6+, ES2020, ES2021 et au-delà. Il gère les fonctions fléchées, template literals, déstructuration, async/await, chaînage optionnel et toute la syntaxe moderne.

Autres outils de minification