Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Minifier du code

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Définissez la notion de code minifié et analysez-en les bénéfices. Apprenez également à minifier votre code.

Transcription

Je suis, ici, sur une page web et j'utilise l'onglet source de mes outils de développement, pour inspecter le code JavaScript associé à cette page. Et voilà, sur quoi je tombe. Pensez-vous vraiment que quelqu'un a écrit du code de cette façon, non, bien sûr. Ce que vous voyez, c'est le résultat d'une minification du code. L'idée, c’est de rendre le code le plus petit et le plus léger possible, en retirant les sauts de lignes, les commentaires et les espaces inutiles. Afin de créer des fichiers les plus petits possibles. Minifier le code JavaScript n'a, donc, rien à voir avec le fait de compiler du code, comme on le fait avec d'autres langages, comme « java » ou « c++». Ici, je ne transforme pas mon code, en « java bytecode », ou en langage machine, non, je retire simplement des espaces, des sauts de lignes et des commentaires. Mais, pour le reste, eh bien, le code normal est pratiquement identique, au code minifié. Alors, comment je fais pour minifier du code ? Je vais fermer mes outils de développement, et la page sur laquelle je me trouve s'appelle « closure-compiler », cela porte très mal son nom, puisque je viens de vous dire que ce n'était pas une compilation. Mais, voici une petite application en ligne, qui va me permettre de minifier mon code. Alors, démonstration, je vais revenir dans mon éditeur. Voici du code JavaScript, vous voyez qu'il y a plein de commentaires, dans ce code. Il y a des lignes vides, il y a des variables, il y a des espaces, un petit peu partout, ici, autour des « = », par exemple, tout cela est, bien sûr, permis dans le JavaScript. Je vais prendre l'ensemble de ce code, donc « Ctrl (ou Cmd) + A », « Ctrl (ou Cmd) + C », pour le copier. Et, quand je reviens dans mon navigateur, je vais coller mon code, là où on me dit : « ADD YOUR CODE HERE ». Donc, voilà, « Cmd + V » sur Mac, « Ctrl + C » sur Windows. Et puis, je vais cliquer sur le bouton « Compile », rappelez-vous, qui porte très mal son nom. Au bout d'un moment, j'obtiens ceci, qui est la version minifiée de mon code. Alors, regardez, j'avais 567 « bytes » au début, je n'ai plus que 251 « bytes », à la fin. Ce ne sont pas des tailles très importantes, ici, dans cet exemple, mais, remarquez que j'ai diminué la taille de mon code d'un facteur 2. Donc, j'ai sauvé 55% d'espace, ici. Si je prends le code compilé qui est ici, que je copie, et que je reviens dans mon éditeur, pour faire un nouveau fichier et coller mon code. Eh bien, vous remarquez que ce n'est pas du langage machine, c'est du JavaScript tout à fait classique, vous pouvez d'ailleurs le lire. Il est beaucoup plus difficile à lire que le code non-minifié. Mais, il n'est pas masqué, si vous voulez, ce n'est pas ce qu'on appelle, en anglais, de l' « obfuscation », ce n'est pas quelque chose pour brouiller les pistes. C'est vraiment, ici, pour avoir le code le plus petit possible. Si je reviens au niveau de mon application, ici eh bien, je peux retirer les « Whitespace only », également, si je refais une compilation, vous allez voir que je retire uniquement les « Whitespace », donc les espaces blancs. Mais pour le reste, le code est tout à fait identique. Ou bien je peux avoir une minification, un peu plus avancée. Je re-appuie sur « Compile », voilà, Et là, vous voyez que j'obtiens un code, encore plus petit, vous voyez que j'ai sauvé 63% de l'espace. Si je reprends, ici, ce code dans mon éditeur, Vous voyez que le code ne tient plus qu'en une seule ligne, et il a été modifié, puisqu'ici, on a même modifié le nom de mes variables, pour prendre le moins de place possible. Donc, au niveau de la minification, comment cela se passe ? Alors, ce n'est pas systématique, la minification, mais c’est quand même très courant. L'idée est d'avoir des fichiers JavaScript les plus petits possibles, particulièrement intéressant, évidemment, dans une situation mobile, où vous devez télécharger tout cela sur des smartphones, par exemple, et des connections 3G. À ce moment là, on appréciera d'avoir les fichiers les plus petits possibles. Dernière chose à vous dire, c'est que ces fichiers minifiés sont très difficiles à modifier, donc, vous avez envie de garder une version non-minifée de votre code. Si vous voulez faire des modifications, c'est là que vous les ferez. Et puis, vous referez une version version minifiée, du code modifié. C'est comme cela que l'on travaille, Donc, gardez, toujours, bien évidemment, dans vos archives, une version non-minifié de ce code, pour pouvoir assurer la maintenance de ce code.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !