Nous sommes tous passés par là, vous avez appris à créer un site Web génial, mais une fois que vous l'avez publié, 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 la compression du HTML), et heureusement pour vous, c'est un processus facile. Aujourd'hui, je vais vous montrer tout ce que vous devez savoir.
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 savoir comment vous appelez vos variables ou de l'espacement entre les crochets, par exemple.
En minifiant le code, vous pouvez réduire considérablement sa taille de 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 notables des performances 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 Google Hosted Libraries, vous avez utilisé du code minifié.
Regardons quelques exemples. Il est difficile de voir l'impact de la minification sur les petites bases de code, je m'excuse donc d'avance pour leur longueur.
Voici quelques éléments non minutés JavaScript de notre guide d'utilisation de JSON avec Python et JavaScript :
// configurer du JSON à utiliser
var voitures =[
{ "marque":"Porsche", "modèle":"911S" },
{ "marque":"Mercedes-Benz", "modèle":"220SE" },
{ "make":"Jaguar","model":"Mark VII" }
] ;
window.onload =fonction() {
// configuration du clic sur le bouton
document.getElementById("theButton").onclick =fonction() {
faire du travail()
} ;
}
fonction faireTravail() {
// ajax le JSON au serveur
$.post("récepteur", voitures, fonction(){
});
// arrête le lien rechargeant la page
event.preventDefault();
} Voici le code minifié :
function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche" ,modèle :"911S"},{marque :"Mercedes-Benz",modèle :"220SE"},{marque :"Jaguar",modèle :"Mark VII"}];window.onload=fonction(){document. getElementById("theButton").onclick=function(){doWork()}} ; Cette version réduite du code est 39 % plus petit. 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 ==différé
var dfd =$.Différé();
function fairechose() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, c'est fini');
}); 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, c'est fini")}); Cette fois, il n'y avait que 26 % réduction - c'est toujours très bon pour un bloc de code aussi mineur.
Voici un dernier exemple de notre guide sur Javascript et le DOM :
//déclarer une nouvelle variable pour contenir un nouvel élément h1
var newHeading =document.createElement("h1");
//ajoute le nœud de texte au document
var h1Text =document.createTextNode("Titre Niveau 1");
//en faire un nœud enfant du nouvel en-tête
newHeading.appendChild(h1Text);
//ajoutez ceci en tant qu'enfant de l'élément défini comme "bt"
document.getElementById("bt").appendChild(newHeading); Remarquez comme il y en a beaucoup de commentaires et d'espaces. La version réduite a réduit la taille du fichier de 52 % :
var newHeading=document.createElement("h1"),h1Text=document.createTextNode("Heading Level 1");newHeading.appendChild(h1Text),document.getElementById("bt ").appendChild(nouveauTitre); Voici les tailles de certaines bibliothèques JavaScript courantes par rapport à leurs versions minifiées :
Certaines de ces bibliothèques présentent une réduction de taille significative lorsqu'elles sont compressées (~80 % ), tandis que d'autres ne sont pas aussi bons (~40 % ). Cela dit, toute économie rendra votre site Web plus rapide pour vos utilisateurs et réduira la pression sur votre serveur Web.
Maintenant que vous savez comment cela fonctionne et à quoi cela ressemble, plongeons dans la façon de le faire. 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 également plusieurs fichiers.
Voici un bref 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 trop de celui à choisir.
JSCompress - Personnellement, j'utilise le plus ce site Web s'il ne s'agit que d'un travail rapide. Il est rapide à exécuter et ils vous montrent même les outils qu'ils ont utilisés pour le construire.
JavaScript Minifier - Cet outil fonctionne bien, mais il brille vraiment en tant qu'API. Cela vous permet de créer votre propre intégration ou service en plus 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 ou de menus, un seul bouton.
Minify - Ce site Web a l'air incroyable, et les développeurs ont clairement prêté attention aux détails ici.
Cette liste pourrait s'allonger indéfiniment. Il existe tellement d'outils en ligne pour réduire les sites Web qu'il est difficile de se tromper.
Les outils de minification existent également sous forme d'outils de ligne de commande ou de 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 et coller, et vous n'avez pas besoin d'extraire votre JavaScript à partir d'un code HTML ou CSS pouvant se trouver dans le même fichier.
Si vous utilisez Microsoft Visual Studio, l'extension Bundler et Minifier du marché compte plus de 600 000 installations ! De plus, il est régulièrement mis à jour et disponible sur GitHub.
Si vous êtes un fan de Sublime Text comme moi, alors le package Minify 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 utilisateur de PyCharm, vous pouvez le configurer pour qu'il s'intègre directement à de nombreux outils de compression courants tels que le compresseur YUI. Bon nombre de ces outils alimentent directement les outils en ligne répertoriés ci-dessus.
Il 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 facile à contourner :
Le code minifié ne peut pas être restauré à son état d'origine.
Lorsque vous minimisez un code, sa forme originale est perdue. Vous devez en conserver une copie si vous voulez avoir le moindre espoir d'apporter facilement des modifications majeures ; il ne suffit pas d'utiliser le contrôle de version.
Bien qu'il soit possible de déminifier votre code, ce n'est plus jamais pareil. Tous vos précieux commentaires sont perdus, d'une part.
Ce n'est pas un gros problème, mais vous devez en tenir compte lors du codage. En règle générale, non compressé> développer et compresser> fabrication.
Vous savez maintenant tout ce qu'il y a à savoir sur la minification de JavaScript ! La minification du code est l'un des moyens de réduire les performances d'un serveur, et tous les grands sites Web le font.
Quels outils utilisez-vous pour réduire votre code ? Vous dérangez-vous même? Faites-le nous savoir dans les commentaires ci-dessous !
Crédit image :NavinTar via Shutterstock