Un site Web peut parfois être gourmand
Sont en fautes des CSS et JS très volumineux comme Jquery and co…
Il existe, vous le savez des versions « minifyed »… les fameux XXXX.min.js ou même YYYY.min.css.
Ces fichiers textes sont générés à partir de différents algorithmes. Pour ma part j’utilise l’outil de Yahoo : YUI Compressor.
On trouve d’ailleurs un package pour .NET qui met à notre disposition 2 DLLs.
Dans la documentation il nous est montré comment éventuellement configurer un MSBUILD.XML pour compresser tous nos JS et tous nos CSS dans respectivement un unique fichier JS et un unique fichier CSS.
Pour ma part la mise en oeuvre de cette méthode me semble laborieuse pour pas grand chose. L’exemple donné permet en effet de tout compresser mais dans des fichiers uniques (tous les fichiers CSS dans un seul fichier CSS compressé et tous les fichiers JS dans un seul fichier JS compressé…).
Je me doute que l’on peut configurer les choses différemment mais configurer fichier par fichier dans le MSBUILD.XML est , je trouve, laborieux…
Je me suis donc créé un petit programme Console que l’on peut intégrer à son MSBUILD…
Celui va identifier tous les fichiers JS et tous les fichiers CSS que vous avez dans votre projet et va générer pour chacun une version « minifyed » (*.min.xxx)
Avant de générer un fichier .min.css ou .min.js, le programme s’assure qu’il y a eu modification ou non… Pas d’écrasement inutile.
Le premier lancement
Au premier lancement, vous devrez intégrer les nouveaux fichiers créés (les *.min.xxx) à votre projet si vous voulez ne pas les perdre au cours d’un processur d’intégration continue…
Vous pourrez en contre partie exclure les fichiers du projet (*.js et *.css) puisque cela ne sont plus que nos fichiers de codages mais que les fichiers exploités en production seront les *.min.xxx
Voilà, de quoi donc optimiser simplement et rapidement vos sites Web… Le tout en continuant de pouvoir utiliser du JS et du CSS lisible (non compressé) pour le DEV , et en étant sûr que rien n’est oublié au fil du temps , des nouveaux CSS et des nouveaux JS…
(A vous de modifier votre code (HTML et éventuellement C# si chargements dynamiques de fichiers CSS ou JS) pour que vous référenciez partout des *.min.xxx en lieu et place des *.js et *.css) :�
<link rel= »stylesheet » type= »text/css » href= »/css/style.css » media= »all » />
deviendra :
<link rel= »stylesheet » type= »text/css » href= »/css/style.min.css » media= »all » />
<script type= »text/javascript » src= »/js/jquery-1.4.2.js »></script>
deviendra
<script type= »text/javascript » src= »/js/jquery-1.4.2.min.js »></script>
Installez le programme où vous voudrez… Et modifiez les propriétés du projet du site Web concerné
call « c:MinifyAll.exe » $(ProjectDir) est donc l’instruction clée ! Nous appelons l’exe (que vous devrez récupérer ci-dessous) et nous lui passons en paramètre le répertoire de notre application Web. De sorte qu’il aille vérifier tous les fichiers CSS et JS à compresser…
A ne pas oublier !
De nouveaux fichiers sont générés la première fois qu’ils sont traités… Il ne faut pas oublier de les INTEGRER AU PROJET. (clic droit sur le nouveau fichier puis « Inclure au Projet »)
On pourra même du coup EXCLURE DU PROJET les fichiers originaux ! 🙂
Sources : Alain BELUT
