14 outils pour réduire le Javascript

La minification Javascript est une technique qui condense votre script dans une empreinte beaucoup plus petite. Vous perdez la lisibilité humaine, mais vous conservez une bande passante considérable - au final, Javascript est destiné à votre navigateur et non à vos utilisateurs.

La plupart des sites de production utilisent la minification Javascript, mais la manière dont cela est réalisé varie grandement. Des simples convertisseurs en ligne aux outils d'interface graphique plus complets, en passant par les interfaces de ligne de commande, nos options sont très variées. Dans cet article, nous allons jeter un oeil à comment fonctionne la minification Javascript, comment nous pouvons l'intégrer dans notre flux de travail et quels sont les avantages et les inconvénients de la minification.

Comment fonctionne la minification

Le meilleur moyen d'apprendre ce qui se passe lorsque vous réduisez votre code est de jeter un coup d'œil au référentiel UglifyJS Github. Ce script est utilisé dans de nombreux convertisseurs en ligne, ainsi que dans les outils d'interface graphique et les outils de ligne de commande tels que Grunt. Voici certaines des transformations appliquées pour raccourcir votre code:

Supprime l'espace inutile
Raccourcit les noms de variables, généralement en caractères uniques
Joint les déclarations var consécutives
Convertit les tableaux en objets si possible
Optimise les déclarations si
Calcule des expressions constantes simples
etc.

Comme exemple rapide, voici une fonction qui écrit essentiellement un texte donné.

 function salut (texte) document.write (texte);

bonjour ('Bienvenue dans l'article');

Voyons ce qui se passe quand on minimise cela. Notez la suppression des espaces et de l'indentation et le raccourcissement de la variable de texte.

function bonjour (e) document.write (e) bonjour ("Bienvenue dans l'article")

Outils de minification Javascript

Les outils utilisés pour minifier Javascript peuvent être classés en trois groupes: outils en ligne, outils d'interface graphique et outils de ligne de commande.

Avec les outils en ligne, il suffit généralement de coller votre code et de copier immédiatement le résultat..
Les outils d'interface graphique contiennent souvent beaucoup plus de fonctionnalités. La minification JS n'est qu'une petite partie de ce qu'ils font.
Les outils de ligne de commande sont également généralement plus complets et proposent la minification sous forme de module..

Outils en ligne

javascript-minifier.com est un bel outil avec une API
Online YUI Compressor est un outil plus puissant qui utilise le compresseur YUI, avec de nombreuses options et des capacités de minification CSS.
jscompress.com est un minificateur sans fioritures mais il fait le travail
jsmini.com est une autre option simple mais entièrement utilisable

L'avantage des outils en ligne est la rapidité avec laquelle vous pouvez les utiliser. Une interface graphique complexe et des outils en ligne de commande réduisent au minimum, mais vous devez avoir un projet configuré pour qu'il fonctionne correctement. L’inconvénient de ces outils est qu’ils ont surtout peu ou pas de personnalisation, au moins par rapport aux outils en ligne de commande.

Outils d'interface graphique

Koala est un outil gratuit pour LESS, la compilation SASS, la minification JS et bien plus encore.
Prepros est une application payante multiplateforme qui vous offre encore plus d'options
Codekit est mon application de choix. C'est une application payante uniquement pour Mac qui offre la compilation de code, la minification, un serveur de prévisualisation, la gestion des paquets Bower, etc.
AjaxminGui est un outil gratuit et unique pour Windows permettant de minifier votre JS.
UltraMinifier est une application gratuite pour OS X qui minimise CSS et JS par glisser-déposer.
Smaller est un outil OS X qui réduit et concatène des fichiers pour vous.

J'ai mentionné deux types d'applications GUI ici. Les applications simples de minification en une étape ressemblent beaucoup à leurs homologues en ligne. Ils sont extrêmement rapides à utiliser car vous pouvez simplement y glisser-déposer des fichiers, aucune installation requise. Cela dit, ils n'apporte pratiquement aucune personnalisation.

De plus grands outils d’interface graphique (Prepros, Koala, Codekit) sont excellents pour la gestion de projets et vous donnent un peu plus d’options pour la compression besoin d'un peu de configuration. Une minification rapide de JS prend environ 20 secondes d'installation, ce qui est beaucoup, comparé au processus en 2 secondes d'outils en ligne ou simples.

D'autre part, ils vous offrent plus de fonctionnalités en général et vous fournissent une automatisation. Vos fichiers JS seront minifiés chaque fois que vous les enregistrez, vous n'avez pas besoin de les réduire manuellement. Si vous développez quelque chose en Javascript, c'est vraiment la voie à suivre.

Outils de ligne de commande

Minify est destiné à ceux qui souhaitent minifier JS à partir de la ligne de commande mais ne veulent rien configurer de fantaisie dans Grunt ou Gulp.
Uglify.js, que nous avons mentionné auparavant, est également disponible en tant qu'outil de ligne de commande autonome.
Grunt a une extension pour la minification Javascript nommée grunt-contrib-uglify
Gulp a aussi une minification JS en utilisant Uglify.js via gulp-uglify

Les outils de ligne de commande ne sont pas réservés aux geeks de Linux! Je ne suis pas très bon au terminal, mais il est facile de configurer des éléments comme Grunt et Gulp grâce à leur excellente documentation. L’avantage des outils de ligne de commande est l’énorme flexibilité que vous avez entre les options de sortie..

D'autre part, il y a un peu d'une courbe d'apprentissage. S'habituer à la ligne de commande prend un peu (pratique) que vous trouverez restrictif avant de commencer à profiter des avantages.

Vue d'ensemble

Si vous débutez dans le développement Web, je vous recommanderais l'un des trois premiers outils d'interface graphique. Ils vous aideront à gérer vos projets en général et vous proposeront bien plus que la minification JS..

Si vous êtes un professionnel expérimenté, vous devriez probablement vous pencher sur Grunt ou Gulp car ils offrent le plus de contrôle sur les tâches d’automatisation. Si vous devez minifier un script rapidement sans mettre en place un projet, les outils en ligne de commande peuvent vous faire gagner beaucoup de temps.

Chaque groupe d’outils a ses avantages et ses inconvénients et, en vérité, vous finirez probablement par en utiliser un à un moment ou à un autre. Gardez à l'esprit que lorsque vous êtes dans un environnement de production, vous devez toujours minifier votre code Javascript et CSS.!