Minificateur JavaScript
Des fichiers plus légers, le même comportement

Pourquoi réduire la taille de ses fichiers JavaScript ?

Un minificateur JavaScript prend un fichier écrit pour être lu par des humains et le réécrit pour qu’un navigateur le télécharge. Vos commentaires partent. Votre indentation part. Vos noms longs et descriptifs deviennent courts. Cependant, le code fait exactement la même chose qu’avant, car rien de tout cela ne change le sens du programme.

Le gain est réel. Un script lisible est surtout fait d’espaces et de noms, et les deux sont des octets que vos visiteurs paient à chaque visite. Par conséquent, un fichier qui passe de 40 Ko à 18 Ko arrive plus vite sur un téléphone, sur une connexion lente et à l’autre bout du monde.

Celui-ci analyse votre code au lieu de le deviner. Il construit un arbre syntaxique, renomme ce qui peut l’être sans risque, supprime ce que rien ne peut atteindre, calcule d’avance l’arithmétique possible, puis relit sa propre réponse pour la vérifier. Les sections suivantes expliquent chaque étape, y compris là où il s’arrête volontairement.

Un minificateur réussit ou échoue selon l’endroit où les instructions se terminent vraiment. La référence MDN sur la grammaire lexicale de JavaScript en est le règlement.

Quand minifier le JavaScript

Minifiez à la fin, jamais au début. Vous voulez le fichier lisible dans votre éditeur et le petit sur votre serveur. Gardez donc l’original, publiez la sortie et ne modifiez jamais la copie minifiée à la main.

C’est surtout important pour les scripts que charge chaque page. Par exemple, un bundle partagé que chaque visiteur télécharge mérite plus d’attention qu’un script sur une page que personne n’ouvre.

Ce que ce minificateur JS ne fera pas

Il ne renommera rien dont il ne peut pas prouver la sûreté. Si votre fichier contient un bloc `with` ou un appel direct à eval, un nom peut être cherché comme chaîne pendant l’exécution, et aucun analyseur ne peut suivre cela. Dans ces fichiers, le renommage se désactive pour tout le fichier et l’outil vous dit pourquoi, plutôt que de publier un renommage qui casse en production.

Il ne renommera pas vos noms de premier niveau, sauf si vous cochez la case. Le code collé est souvent un script classique, où une fonction de premier niveau devient une propriété de window qu’un autre fichier peut appeler par son nom. En revanche, dans un module ou une IIFE, rien d’extérieur ne peut atteindre ces noms, donc l’option y offre des octets gratuits.

Il ne touchera ni aux globales ni aux API du navigateur. window, document et console ne sont pas à vous, donc ils restent tels quels, avec tout ce qui est importé, exporté ou jamais déclaré dans le fichier fourni.

Un mot sur les source maps

Cet outil n’écrit pas encore de source maps, donc une trace de pile issue d’une sortie renommée nommera les fonctions par leurs noms courts. Si des traces lisibles comptent plus que les derniers octets, désactivez le renommage ; les autres passes tournent toujours et vous gardez vos noms d’origine.