Pourquoi minifier le code JavaScript ?

En réduisant la taille des fichiers, la minification JavaScript peut améliorer les performances des pages Web.

Share facebook icon linkedin icon twitter icon email icon

Minification JS

Objectifs d’apprentissage

Après avoir lu cet article, vous :

  • Définir la minification JavaScript
  • En savoir plus sur l'uglification, l'obfuscation et le chiffrement

Qu'est-ce que la minification dans JavaScript ?

La minification, également connue sous le nom de minimisation, est le processus de suppression de tous les caractères inutiles du code source JavaScript sans altérer sa fonctionnalité. Cela inclut la suppression des espaces, commentaires et points-virgules, ainsi que l'utilisation de noms et fonctions de variables plus courts. La minimisation du code JavaScript entraîne une taille de fichier compacte.

Par exemple, voici un bloc de code avant et après minification :

Avant minification : huit lignes de code

JavaScript Without Minification

Après minification : une seule ligne de code

JavaScript With Minification

La minification accélère le chargement des pages web, en améliorant ainsi l'expérience du site web, pour le plus grand bonheur des visiteurs et des moteurs de recherche.

En quoi la minification est-elle différente de l'obfuscation, de la compression, du chiffrement ou de l'« uglification » ?

  • Uglification : c'est essentiellement la même chose que la minification. Uglify JS est une bibliothèque JavaScript pour réduire les fichiers JavaScript. « Uglifier » un fichier JavaScript c'est le réduire à l'aide d'Uglify. L'uglification améliore les performances tout en réduisant la lisibilité.
  • Chiffrement : il s'agit du processus de conversion de données ordinaires en données codées. Ces données chiffrées, ou codées, sont connues sous le nom de code-texte (ciphertext) et ont besoin d'une clé secrète pour être déchiffrés. Le navigateur ne peut pas exécuter de code chiffré. Le chiffrement est une fonction de sécurité et ne réduit pas nécessairement la taille d'un fichier.
  • Obfuscation : ce processus est utilisé afin de masquer la logique métier. Le code est modifié de telle sorte qu'il devient illisible par les humains. Cela complique l'ingénierie inverse. L'obfuscation est différente du chiffrement dans la mesure où les ordinateurs sont toujours capables de comprendre et d'exécuter le code. L'obfuscation est réalisée en changeant les noms des variables, des fonctions et des membres. La réduction de la taille des fichiers qui en résulte améliore également les performances, bien que ce ne soit pas l'objectif principal de l'obfuscation.
  • Compression : la compression des données est un processus qui réduit le nombre de bits nécessaires pour représenter les données. La compression des données peut libérer de l'espace précieux sur les disques durs, accélérer le transfert de fichiers et réduire les coûts de bande passante réseau. Certains fichiers, comme les fichiers Microsoft Word, peuvent être compressés à 90 % de leur taille d'origine.

Pourquoi les développeurs n'écrivent-ils pas de code minifié dès le départ ?

La minification se traduit par des fichiers compacts, ce qui en fait une bonne pratique de performances web. Alors, pourquoi ne pas écrire un code déjà minifié ?

Le code JavaScript est écrit pour les humains et par les humains qui ont besoin d'espaces, de formatage et de commentaires pour pouvoir comprendre et déboguer le code. Une fois le code écrit, un logiciel de réduction peut être utilisé afin d'améliorer les performances. La raison tient au fait que les navigateurs peuvent exécuter un code sans avoir besoin de le comprendre.

Quels sont les inconvénients de la minification ?

La minification peut casser des scripts compliqués en raison de variables dépendantes du site comme les thèmes, les plugins et l'environnement de serveur. De plus, la minification doit être effectuée conjointement avec d'autres réglages de performances. Seule, elle pourrait ne pas apporter de gains importants. La minification peut également introduire des erreurs difficiles à déboguer.