Déminifier JavaScript en ligne — Déminificateur JS

Déminifiez du JavaScript compressé instantanément. Restaurez une mise en forme lisible — traitement dans le navigateur, aucune donnée envoyée au serveur.

Chargement…

Déminification JavaScript

Déminifiez du JavaScript compressé en ligne. Restaurez une mise en forme lisible — traitement instantané dans le navigateur.

Fonctionnalités

Restaurez la lisibilité de votre code JavaScript minifié en ajoutant des espaces et des retours à la ligne.

Déminifier

Restaurez la lisibilité de votre code JavaScript minifié en ajoutant des espaces et des retours à la ligne.

Package utilisé

Terser

v5.47.1

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équentes — Déminification

Tout savoir sur la déminification

Puis-je déminifier du JavaScript ?

Oui, collez du JavaScript minifié et cliquez sur Déminifier. L'indentation est restaurée ; les noms de variables raccourcis ne peuvent pas être récupérés.