Compresseurs JavaScript : comment et pourquoi réduire votre JS

Nous avons tous été là, vous avez appris comment créer un site web génial , mais une fois que vous le publiez, c'est insupportablement lent.

La réduction de votre javascript est un moyen d'accélérer les temps de réponse du site Web (ainsi que compression HTML ), et heureusement pour vous, c'est un processus facile. Aujourd'hui, je vais vous montrer tout ce que vous devez savoir.

Que signifie minifier ?

Le processus de minification (ou minifier ) est un concept simple. Lorsque vous écrivez du code en JavaScript ou dans tout autre langage, de nombreuses fonctionnalités ne sont nécessaires que pour rendre le code plus facile à comprendre pour les humains - les ordinateurs ne se soucient pas de ce que vous appelez vos variables, ou de l'espacement entre parenthèses, par exemple.

En minimisant le code, vous pouvez réduire considérablement la taille de son fichier. Un fichier plus petit sera donc plus rapide à télécharger pour vos utilisateurs. Si vous n'écrivez qu'une ou deux lignes de JavaScript, il n'y aura probablement pas d'amélioration notable. Cependant, si vous écrivez beaucoup de code ou utilisez de grandes bibliothèques telles que jQuery, des augmentations de performances notables et des tailles de fichiers considérablement réduites sont facilement réalisables !

Si vous chargez du code à partir d'un CDN externe, tel que Bibliothèques hébergées par Google , vous avez utilisé du code minifié.

comment jailbreaker ios 11 avec un ordinateur

À quoi ressemble le code minifié ?

Regardons quelques exemples. Il est difficile de voir l'impact de la minification sur les petites bases de code, donc je m'excuse d'avance pour leur longueur.

Voici quelques non-minifié JavaScript de notre guide d'utilisation de JSON avec Python et JavaScript :

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

Voici le code minifié :

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Cette version minifiée du code est 39 pour cent plus petite. Dans cet exemple, les noms de variables restent les mêmes, mais tous les espaces et commentaires ont été supprimés.

Voici un autre exemple de notre guide sur jQuery :

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

Voici le code minifié :

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

Cette fois, il n'y avait qu'un 26 pour cent réduction - c'est toujours très bien pour un bloc de code aussi mineur.

Voici un dernier exemple de notre guide Javascript et le DOM :

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

Remarquez comment il y a beaucoup de commentaires et d'espaces. La version minimisée a réduit la taille du fichier de 52 pour cent :

comment chaud est trop chaud pour l'ordinateur

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Voici les tailles de certaines bibliothèques JavaScript courantes par rapport à leurs versions réduites :

Highcharts : 1 Mo > 201 Ko
jQuery : 270 Ko > 90 Ko
MooTools : 164 Ko > 93 Ko

Certaines de ces bibliothèques présentent une réduction de taille significative lorsqu'elles sont compressées ( ~80 pour cent ), tandis que d'autres ne sont pas aussi bons ( ~ 40 pour cent ). Cela dit, toute économie rendra votre site Web plus rapide pour vos utilisateurs et réduira la pression sur votre serveur Web.

Comment minifier ?

Maintenant que vous savez comment cela fonctionne et à quoi cela ressemble, voyons comment procéder. Ne vous inquiétez pas, il n'est pas du tout nécessaire de modifier manuellement votre code ! Il existe une variété d'outils disponibles gratuitement qui gèrent le processus pour vous.

Ceux-ci fonctionnent de plusieurs manières. La plupart des outils en ligne vous permettent de copier et coller du code, qu'ils traiteront ensuite et vous renverront sur la page. Ces outils vous permettront souvent de télécharger plusieurs fichiers également.

Voici un petit tour d'horizon des outils en ligne. Ils fonctionnent généralement de la même manière, vous n'avez donc pas à vous soucier de savoir lequel choisir.

JSCompress -- Personnellement, j'utilise le plus ce site Web s'il ne s'agit que d'un travail rapide. C'est rapide à exécuter et ils vous montrent même les outils qu'ils ont utilisés pour le construire.

Minificateur JavaScript -- Cet outil fonctionne bien, mais il brille vraiment en tant qu'API . Cela vous permet de créer votre propre intégration ou service au-dessus de leur site Web existant.

JavaScript Minifier -- Un autre site Web du même nom, cet outil est aussi simple que possible. Pas d'options ni de menus, un seul bouton.

Minifier -- Ce site Web a l'air incroyable, et les développeurs ont clairement prêté attention aux détails ici.

Cette liste pourrait s'éterniser. Il existe tellement d'outils en ligne pour minimiser les sites Web qu'il est difficile de se tromper.

Des outils de minification existent également en tant qu'outils de ligne de commande ou plugins pour votre Éditeur JavaScript . Ces outils sont souvent beaucoup plus rapides à utiliser et « fonctionnent » simplement avec votre code existant. Il n'est pas nécessaire de copier-coller, et vous n'avez pas besoin d'extraire votre code JavaScript à partir d'un code HTML ou CSS pouvant se trouver dans le même fichier.

Si vous utilisez Microsoft Visual Studio, le Bundle et Minifier l'extension du marché a plus de 600 000 installations ! Non seulement cela, mais il est régulièrement mis à jour et disponible sur GitHub .

Si vous êtes fan de Texte sublime comme je suis, alors le Minifier paquet est celui que vous voulez. Avec plus de 61 000 installations, c'est un package très populaire, et qui est également disponible sur GitHub , si vous souhaitez contribuer à un projet open source .

Enfin, si vous êtes un PyCharme utilisateur, vous pouvez le configurer pour intégrer directement avec de nombreux outils de compression courants tels que Compresseur YUI . Beaucoup de ces outils alimentent directement les outils en ligne énumérés ci-dessus.

Mises en garde

Là a être un piège, n'est-ce pas ? Rien ne peut jamais être parfait. Eh bien, oui, il y a un problème, mais il est assez mineur et facilement contourné :

Le code minifié ne peut pas être restauré à son état d'origine.

Lorsque vous minifiez un code, sa forme originale est perdue. Vous devez en conserver une copie si vous voulez avoir l'espoir d'effectuer facilement des changements majeurs - il ne suffit pas d'utiliser le contrôle de version.

Alors qu'il est possible de déminifier votre code, il n'est plus jamais tout à fait le même. Tous vos précieux commentaires sont perdus, d'une part.

Ce n'est pas un gros problème, mais vous devez le garder à l'esprit lors du codage. En règle générale, non compressé > développer et comprimé > fabrication.

Vous savez maintenant tout ce qu'il y a à savoir sur la minification de JavaScript ! La réduction du code est l'un des moyens d'optimiser les performances d'un serveur, et tous les grands sites Web le font.

Quels outils utilisez-vous pour minifier votre code ? Est-ce que vous vous embêtez? Faites-nous savoir dans les commentaires ci-dessous!

comment partager des jeux sur xbox

Crédit d'image: NavinTar via Shutterstock

Partager Partager Tweeter E-mail Supprimez ces fichiers et dossiers Windows pour libérer de l'espace disque

Besoin de libérer de l'espace disque sur votre ordinateur Windows ? Voici les fichiers et dossiers Windows qui peuvent être supprimés en toute sécurité pour libérer de l'espace disque.

Lire la suite Rubriques connexes

La programmation
JavaScript
Java
Création de sites web

A propos de l'auteur Joe Coburn(136 articles publiés)

Joe est diplômé en informatique de l'Université de Lincoln, au Royaume-Uni. C'est un développeur de logiciels professionnel, et lorsqu'il ne pilote pas de drones ou n'écrit pas de musique, on le trouve souvent en train de prendre des photos ou de produire des vidéos.

Plus de Joe Coburn

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner