Partager:
Compresseurs JavaScript Comment et pourquoi minimiser votre JS
Nous sommes tous passés par là. Vous avez appris à créer un site Web génial. Comment créer un site Web: pour les débutants Comment créer un site Web: pour les débutants aujourd’hui, je vous guiderai tout au long du processus de création d’un site Web complet. Ne vous inquiétez pas si cela semble difficile. Je vous guiderai à travers chaque étape du processus. Lisez plus, mais une fois que vous le publiez, c'est insupportablement lent.
Réduire au minimum votre javascript est un moyen d’accélérer les temps de réponse des sites Web (avec la compression HTML: comment le HTML compressé fonctionne et pourquoi vous en avez besoin? Le HTML compressé et pourquoi vous en avez besoin Dans cet article, nous allons passer en revue les deux méthodes principales. pour le HTML compressé, pourquoi les fichiers HTML doivent être réduits et comment s'y prendre. Lire la suite), et heureusement pour vous, le processus est simple. Aujourd'hui, je vais vous montrer tout ce que vous devez savoir.
Que signifie Minify?
Le processus de minification (ou minifiant) est un concept simple. Lorsque vous écrivez du code en JavaScript ou dans une autre langue, 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, ni de l’espacement entre crochets, Exemple.
En réduisant le code, vous réduisez considérablement la taille du 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 code JavaScript, il n'y aura probablement pas d'amélioration notable. Toutefois, si vous écrivez beaucoup de code ou utilisez des bibliothèques volumineuses telles que jQuery, vous pouvez facilement améliorer les performances et réduire considérablement la taille des fichiers.!
Si vous chargez du code à partir d'un CDN externe Que sont les CDN et pourquoi le stockage n'est-il plus un problème? Qu'est-ce que les CDN sont et pourquoi le stockage n'est plus un problème? Les CDN rendent Internet rapide et les sites Web abordables, même lorsque vous êtes en mesure de toucher des millions d'utilisateurs. Premièrement, la bande passante coûte de l'argent. ceux d'entre nous qui ont des contrats limités le savent trop bien. Non seulement vous… Lire la suite, comme Google Hosted Libraries, vous avez utilisé du code minifié.
À quoi ressemble le code modifié?
Regardons quelques exemples. Il est difficile de voir l'impact de la minification sur de petites bases de code, je m'excuse par avance pour leur longueur..
Voici quelques non miné JavaScript de notre guide d'utilisation de JSON avec Python et JavaScript:
// configure certains JSON pour qu'ils utilisent var cars = ["make": "Porsche", "modèle": "911S", "make": "Mercedes-Benz", "modèle": "220SE", "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // configurer le bouton, cliquez sur document.getElementById ("theButton"). onclick = function () doWork (); function doWork () // ajaxer le JSON au serveur $ .post ("receiver", cars, function () ); // arrête le lien en rechargeant la page event.preventDefault (); Voici le code minifié:
function doWork () $. post ("receiver", voitures, function () ), event.preventDefault () var cars = [marque: "Porsche", modèle: "911S", marque: " Mercedes-Benz ", modèle:" 220SE ", marque:" Jaguar ", modèle:" Marque VII "]; window.onload = function () document.getElementById (" le bouton "). Onclick = function () faire du travail();Cette version abrégé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 les commentaires ont été supprimés..
Voici un autre exemple de notre guide sur jQuery:
// dfd == deferred var dfd = $ .Deferred (); function doThing () $ .get ('un peu / lent / url', function () dfd.resolve ();); retourne dfd.promise (); $ .when (doThing ()). then (function () console.log ('YAY, c'est fini'););Voici le code minifié:
function doThing () return $ .get ("une / lente / 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 qu'un 26 pour cent réduction - c'est toujours très bon pour un bloc de code aussi mineur.
Voici un dernier exemple tiré de notre guide sur Javascript et le DOM:
// déclare une nouvelle variable pour contenir un nouvel élément h1 var newHeading = document.createElement ("h1"); // ajoute le noeud de texte au document var h1Text = document.createTextNode ("Heading Level 1"); // en fait un nœud enfant du nouveau titre newHeading.appendChild (h1Text); // ajoute ceci en tant qu'enfant d'un élément défini comme "bt" document.getElementById ("bt"). appendChild (newHeading);Remarquez comment il y a beaucoup des commentaires et des espaces. La version réduite a réduit la taille du fichier de 52% :
var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Titre de niveau 1"); newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);Voici la taille de certaines bibliothèques JavaScript courantes par rapport à leurs versions minifiées:
- Highcharts: 1 Mo> 201 Ko
- jQuery: 270 KB> 90 KB
- MooTools: 164 KB> 93 KB
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 sauvegarde accélérera votre site Web pour vos utilisateurs et réduira les contraintes sur votre serveur Web..
Comment vous Minify?
Maintenant que vous savez comment ça marche et à quoi ça ressemble, voyons comment le faire. Ne vous inquiétez pas, il n'est pas 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 vont ensuite traiter et vous renvoyer sur la page. Ces outils vous permettront souvent de télécharger plusieurs fichiers..
Voici un bref aperçu des outils en ligne. La plupart du temps, ils fonctionnent de la même façon, vous n'avez donc pas à vous soucier de savoir lequel choisir..
JSCompress - Personnellement, j’utilise le plus souvent ce site Web, si ce n’est qu’un travail rapide. Il est rapide à exécuter et vous montre même les outils utilisés pour le construire..
JavaScript Minifier - Cet outil fonctionne bien, mais il brille vraiment comme une API. Cela vous permet de construire votre propre intégration ou service sur le site Web existant..
JavaScript Minifier - Un autre site Web du même nom, cet outil est aussi simple qu’ils viennent. Pas d'options ou de menus, juste un bouton.
Minify - Ce site a un look incroyable, et les développeurs ont clairement porté leur attention sur les détails ici.
Cette liste pourrait durer éternellement. Il y a tellement d'outils en ligne pour réduire les sites Web qu'il est difficile de se tromper.
Les outils de minification existent également en tant qu'outils de ligne de commande ou plug-ins pour votre éditeur JavaScript. Les 5 meilleurs éditeurs pour les programmeurs et les programmeurs productifs Javascript Les 5 meilleurs éditeurs pour les codeurs et les programmeurs productifs Ces jours-ci, seuls cinq éditeurs valent la peine d'être pris en compte lors de l'écriture de JavaScript. Vous pouvez trouver des dizaines d’alternatives, mais aucune d’entre elles n’a de valeur, alors ne perdez pas votre temps. Lire la suite . Ces outils sont souvent beaucoup plus rapides à utiliser et “juste travailler” avec votre code existant. Il n'est pas nécessaire de copier et coller, et vous n'avez pas besoin d'extraire votre code JavaScript de tout 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 souhaitez. Avec plus de 61 000 installations, c'est un paquet très populaire et également disponible sur GitHub, si vous souhaitez contribuer à un projet open source.
Enfin, si vous êtes un utilisateur PyCharm, vous pouvez le configurer pour s’intégrer directement à de nombreux outils de compression courants tels que le compresseur YUI. Beaucoup de ces outils alimentent directement les outils en ligne énumérés ci-dessus.
Mises en garde
Là a être un bon coup? 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 réduit ne peut pas être restauré à son état d'origine.
Lorsque vous réduisez un code, sa forme d'origine est perdue. Vous devez en conserver une copie si vous souhaitez avoir l’espoir d’apporter facilement des modifications majeures. Il ne suffit pas d’utiliser le contrôle de version Qu'est-ce que Git et pourquoi utiliser le contrôle de version si vous êtes un développeur? Qu'est-ce que Git et pourquoi? Devrait utiliser le contrôle de version si vous êtes développeur En tant que développeur Web, nous avons souvent tendance à travailler sur des sites de développement locaux, puis il suffit de tout télécharger lorsque nous avons terminé. C'est bien quand c'est juste toi et les changements sont petits,… Read More .
Bien qu'il soit possible de désamorcer 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 de base, non compressé > développer et comprimé > production.
Maintenant, vous savez tout sur la minification de JavaScript! La réduction du code est l’un des moyens de réduire les performances d’un serveur. Tous les grands sites Web le font..
Quels outils utilisez-vous pour réduire votre code? Avez-vous même déranger? Faites-nous savoir dans les commentaires ci-dessous!
Crédit d'image: NavinTar via Shutterstock
En savoir plus sur: Java, JavaScript, Web Design.