Minificateur de code

Comment utiliser Minificateur de code

1. Collez votre CSS, JavaScript ou HTML.
2. Choisissez le langage et lancez la minification.
3. Copiez le résultat pour la production.

Ce qui est retiré et ce qui reste

La minification est une transformation sûre : le code fait exactement la même chose.

Sont supprimés les espaces et sauts de ligne inutiles, les commentaires, et le point-virgule final de chaque bloc lorsqu'il est superflu.

En JavaScript, les noms des variables locales sont en outre raccourcis, ce qui réduit sensiblement davantage la taille.

Ce qui ne change jamais, c'est le comportement : si le code minifié se comporte différemment, c'est qu'il y avait une fragilité dans l'original — généralement une dépendance aux sauts de ligne ou une insertion automatique de point-virgule qui se casse.

Attention toutefois : en HTML, tous les espaces ne sont pas supprimables. À l'intérieur d'un élément pre, ou entre éléments en ligne, l'espace est significatif et le retirer change le rendu.

Et en CSS, les commentaires commençant par une marque particulière sont généralement conservés, car c'est là que figurent les licences qu'il faut légalement maintenir.

Minifier n'est pas compresser

Une confusion fréquente qu'il vaut mieux dissiper.

La minification réduit le code source. La compression — gzip ou brotli — réduit ce qui circule sur le réseau, et c'est le serveur qui l'applique à l'envoi.

Ce sont deux choses distinctes et complémentaires : on utilise les deux.

Le point intéressant est que la compression élimine déjà une bonne part de la redondance des espaces, donc le gain supplémentaire de la minification est plus faible que ne le laisse croire le pourcentage brut.

Cela reste rentable, surtout en JavaScript, où le raccourcissement des noms apporte une réduction que la compression seule n'obtient pas.

Vérifiez que la compression est activée sur votre serveur : c'est l'optimisation au meilleur rapport effort/résultat qui existe, et il reste des sites où elle est désactivée sans que personne ne le sache.

Et si vous servez vos fichiers via un réseau de diffusion de contenu, il s'en charge généralement, mais mieux vaut le vérifier que le supposer.

Bien l'intégrer

Minifier à la main et coller le résultat est un mauvais processus.

La minification doit faire partie de votre chaîne de construction, pas être une étape manuelle. Si vous minifiez à la main, vous finirez tôt ou tard par modifier le fichier minifié, ce qui est une source assurée d'ennuis.

Conservez toujours le code source dans le dépôt et générez le minifié au déploiement.

Publiez des cartes de source pour pouvoir déboguer en production. Sans elles, une erreur dans un fichier minifié vous indique la ligne 1, colonne 8420, ce qui n'aide pas.

Attention aux cartes de source en production : elles exposent votre code source. Beaucoup d'équipes les génèrent mais ne les servent qu'à leur outil de suivi d'erreurs, pas publiquement.

Et n'en faites pas une obsession. Avant de minifier, regardez si vous chargez une bibliothèque entière pour deux fonctions, des polices que personne ne voit, ou des images non optimisées. Le poids réel est généralement là.

Tout se déroule dans votre navigateur : le code n'est envoyé à aucun serveur, ce qui compte si vous travaillez sur du code client sous accord de confidentialité.

Questions fréquentes