Pourquoi minifier du JavaScript ?

La minification JavaScript réduit la taille des fichiers, améliore les temps de chargement et optimise les performances web. Cela peut réduire la taille de 30 à 70% en moyenne.

Comment fonctionne la minification JavaScript ?

La minification supprime les espaces, les commentaires et les caractères inutiles du code JavaScript, tout en préservant sa fonctionnalité. Le code reste exécutable mais est plus compact.

Puis-je déminifier du code JavaScript ?

Oui, notre outil peut déminifier du code JavaScript minifié pour le rendre plus lisible, bien que certaines informations comme les noms de variables puissent être perdues.

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

Absolument. Tout le traitement se fait dans votre navigateur. Aucune donnée n'est envoyée vers nos serveurs, garantissant une confidentialité totale.

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.

Minification JavaScript

Utilisation de Terser pour optimiser et compresser le code JavaScript

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

Autres outils de minification

Minifier CSS

Minifier JSON

Sérialiser PHP