Minificateur JS

Le Minificateur JS est un outil gratuit qui supprime les caractères inutiles du code JavaScript et indique le nombre de caractères avant et après la minification.

À quoi sert la minification du JavaScript ?

La minification du JavaScript réduit la quantité de code source que le navigateur doit télécharger. Elle supprime généralement la mise en forme inutile pour la syntaxe JavaScript, notamment les retraits, les sauts de ligne et certains espaces.

Un script plus compact peut réduire le volume transféré et le travail d'analyse, en particulier lorsqu'un site utilise plusieurs bundles volumineux. La compression HTTP, avec Brotli ou gzip par exemple, reste importante, car la minification et la compression lors du transfert agissent à des niveaux différents. La minification retire des caractères du code source, tandis que la compression encode plus efficacement les données répétées pendant leur transfert.

Cette opération est généralement effectuée lors d'une phase de build, avant le déploiement. Elle peut aussi servir à examiner un script tiers non minifié, à comparer la taille de plusieurs bundles ou à préparer un fichier autonome pour un site dépourvu de pipeline de build.

Une minification réussie ne prouve pas que le JavaScript fonctionne correctement. Le script peut encore contenir des appels d'API incorrects, des variables inaccessibles ou du code qui échoue uniquement lors de son exécution.

Comment utiliser le Minificateur JS ?

Colle le code JavaScript dans le champ JS, lance l'outil, puis copie le contenu renvoyé dans JS minifié. Conserve le fichier source d'origine dans ton système de gestion de versions et déploie la copie compacte au lieu de remplacer le code lisible.

1. Commence par vérifier la syntaxe du code source, puis exécute un linter et les tests automatisés.
2. Colle le script complet dans JS, y compris les imports de modules et les fonctions enveloppes qui font partie du fichier.
3. Consulte Caractères JS et Caractères JS minifiés pour comparer le nombre de caractères.
4. Vérifie que le JavaScript minifié s'exécute correctement dans le même navigateur et le même contexte de déploiement que le fichier de production.
5. Si les versions minifiée et lisible sont stockées ensemble, utilise un nom de fichier explicite comme app.min.js.

Le traitement est effectué sur le serveur. Ton code lui est transmis via HTTPS et n'est pas stocké. Le serveur doit néanmoins recevoir le JavaScript pour pouvoir le traiter. N'envoie donc aucun code source que ton organisation interdit de transmettre à un service externe.

Que contient le résultat minifié ?

Le résultat contient le JavaScript compact ainsi que deux nombres de caractères. Caractères JS correspond à la longueur du code saisi, tandis que Caractères JS minifiés indique la longueur du contenu renvoyé dans JS minifié.

Ces valeurs sont calculées avec la fonction mb_strlen de PHP, qui mesure la longueur d'une chaîne multioctet au lieu de simplement compter les octets. Le nombre de caractères ne correspond donc pas à la taille finale transférée sur le réseau. Certains caractères UTF-8 occupent plusieurs octets, et gzip ou Brotli peut encore réduire la taille du fichier transmis.

Cet outil ne fournit aucun champ distinct de validation ou de diagnostic. Ne compte pas sur lui pour repérer tous les crochets manquants, toutes les expressions régulières incorrectes ou toutes les fonctionnalités de langage non prises en charge. Les erreurs souvent associées au JSON, comme les noms de propriétés sans guillemets ou les virgules finales, ne constituent notamment pas des vérifications fiables du JavaScript, car la syntaxe des objets littéraux JavaScript diffère de celle du JSON. Utilise le Validateur et embellisseur JSON pour les données JSON.

Exemples simples et cas délicats

Voici un exemple simple dans lequel les espaces sont supprimés.

Entrée

function add(a, b) { return a + b; }

Forme compacte

function add(a,b){return a+b;}

La mise en forme autour d'un objet peut également être supprimée sans modifier la valeur de ses propriétés.

Entrée

const settings = { theme: "dark", retries: 2 };

Forme compacte

const settings={theme:"dark",retries:2};

La mise en forme exacte peut varier d'un minificateur à l'autre, notamment pour les points-virgules facultatifs. Il n'est pas possible de compacter le JavaScript en toute sécurité en supprimant systématiquement chaque espace ou saut de ligne. Une minification sûre doit tenir compte du contexte lexical et syntaxique afin de distinguer la simple mise en forme des caractères qui modifient le programme.

• Les espaces dans les chaînes font partie des données. L'espace dans "Newcastle upon Tyne" doit être conservé.
• Les signes de ponctuation peuvent jouer un rôle syntaxique. Supprimer l'espace dans a + +b peut produire une suite de jetons différente.
• Les sauts de ligne influencent parfois l'insertion automatique des points-virgules, notamment après return, break ou continue. Un saut de ligne juste après throw n'est pas autorisé, car son expression doit commencer sur la même ligne.
• Les caractères accentués et non latins peuvent apparaître dans les chaînes et, lorsque les règles JavaScript relatives aux identifiants l'autorisent, dans les identifiants. Leur taille en octets peut différer de leur nombre de caractères.
• Les nombres sont des jetons du code source, pas des instructions liées au nombre de caractères. Un minificateur doit préserver leur valeur numérique, même s'il choisit une notation équivalente plus courte.

Quand la minification du JavaScript est-elle inutile ?

Il est généralement inutile de minifier à nouveau un fichier déjà minifié. Un second passage peut ne rien réduire, ou presque, tout en compliquant le suivi des fichiers produits par le build et en risquant d'interférer avec les source maps existantes.

Il est également peu utile de remettre en forme, puis de minifier du JavaScript destiné à être lu uniquement par une machine. Conserve une version lisible pour la maintenance et génère les fichiers de déploiement à partir de celle-ci. Pour une application établie, un outil de build comme esbuild, Rollup ou webpack est généralement plus adapté, car il peut automatiser le regroupement des modules et la génération des source maps. La minification peut être intégrée ou ajoutée par configuration ou à l'aide d'un plugin, tandis que Terser est un minificateur dédié.

Ne considère pas la minification comme une méthode d'obscurcissement ou de contrôle d'accès. Les noms de fonctions et de variables peuvent rester visibles, les chaînes littérales demeurent lisibles et les outils de développement des navigateurs peuvent remettre le code compact en forme. Les secrets, les clés privées et les identifiants donnant des accès privilégiés ne doivent jamais être intégrés au JavaScript côté client.

Si tu prépares toutes les ressources statiques d'une page, le Minificateur CSS et le Minificateur HTML peuvent appliquer l'opération correspondante à ces formats. Utilise un outil distinct pour chaque format, car leurs règles d'analyse et de gestion des espaces sont différentes.

Questions fréquentes

L'outil génère-t-il une source map ?

Non, aucun champ de source map n'est renvoyé. Si tu veux faire correspondre les traces d'erreur de production aux fichiers d'origine, génère le script minifié et son fichier .map associé au cours du même processus de build. Déployer une source map provenant d'un autre build peut produire des références de lignes et de colonnes trompeuses.

La minification empêche-t-elle de copier mon JavaScript ?

Non. Le navigateur doit recevoir le code côté client pour pouvoir l'exécuter, ce qui permet à un visiteur de le télécharger et de l'examiner. La minification rend le code source moins lisible, mais elle ne garantit ni sa confidentialité, ni le respect d'une licence, ni une protection réelle des secrets qui y seraient intégrés.

Puis-je coller du code contenant des clés API ?

Ne colle pas de clés API secrètes, de jetons ou d'identifiants privés. Le contenu est envoyé via HTTPS et n'est pas stocké, mais il est traité sur le serveur. Les clés publiques de navigateur délibérément distribuées à chaque visiteur doivent tout de même être soumises à des restrictions de domaine, d'origine, de quota ou d'autorisation lorsque le service concerné le permet.

Un nombre de caractères plus faible accélère-t-il toujours le chargement de la page ?

Non. L'effet dépend de la taille initiale du fichier, de la mise en cache, des conditions de connexion, de la compression appliquée par le serveur et de la quantité de JavaScript que le navigateur doit analyser et exécuter. Vérifie aussi la taille transférée après compression et le comportement à l'exécution, pas seulement le nombre de caractères.

Dois-je conserver l'extension .js après la minification ?

Oui. Un fichier JavaScript minifié conserve normalement l'extension .js. Par convention, on utilise .min.js lorsque les deux versions sont disponibles. Avant le déploiement, vérifie que le serveur envoie un type de contenu JavaScript approprié et que le HTML ou l'import de module pointe vers le bon fichier.