Compacter JavaScript, CSS - reduire la taille des fichiers JavaScript
Lorsque l'on conçoit, une application web, on utilise de plus de JavaScript, cela a pour cause d'augmenter la taille du téléchargement des ressources et donc le temps d'affichage de la page.
On peut facilement réduire la taille de ces fichiers en supprimant les commentaires et espaces inutile.
Pour les fichiers JavaScript il y a le "JavaScript Minifier" de Douglas Crockford qui est implémenté dans de nombreux langages dont C#.
Pour les fichiers CSS, poppyto nous a fait un handler pour compacter les CSS en C# : Compactez vos CSS - ASP.NET
On peut encore optimiser la taille en regroupant tous les fichiers JavaScript utilisés en un seul fichier. C'est ce que fais le nouveau ToolkitScriptManager des ajax toolkits, qui est aussi capable de compacter et gzipper les fichiers.
Dans certains cas, on est obligé de mettre du code JavaScript directement dans la page, généralement pour récupérer les clientID des contrôles serveur. Je viens de rendre disponible un contrôle qui permet de compacter le code JavaScript ajouté dans la page.
<asp:ScriptManager runat="server" />
<cs:Script ID="Script1" runat="server">
// Définition de la méthode pouetpouet
var pouetpouet = function(){
// cette méthode ne sert à rien
var j = 0;
for ( var i = 0 ; i < 100 ; i++ ) {
j += 1;
}
}
</cs:Script>
<div>
<asp:button ID="btn1" runat="server" Text="toto" />
</div>
<cs:Script ID="Script2" runat="server">
$addHandler($get('<%=btn1.ClientID%>'), 'click', function(e){
/* je ne veux pas que tu clicks sur le bouton */
e.preventDefault();
});
</cs:Script>
Le contrôle Script va compacter le JavaScript puis l'enregistrer via ScriptManager.RegisterStartupScript, ce qui veut dire que vous n'aurez plus de JavaScript au milieu de la page, mais ils seront tous regroupé dans une même balise script en bas de la page.
Le code plus haut générera :
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
var pouetpouet=function(){var j=0;for(var i=0;i<100;i++){j+=1;}}
$addHandler($get('btn1'),'click',function(e){e.preventDefault();});//]]>
</script>
Le contrôle se trouve sur aspfr : Contrôle pour compacter du JavaScript, il contient également l'implémentation C# du js minifier.
Bien sur vous pouvez gagner d'avantages de performances en activant la compression GZip sur votre serveur web. Pour IIS il y a un article sur TechnoS-SourceS de Nix : Activer la compression GZip dans IIS6 et voici pour apache : Activation mod gzip sur Apache 2.0.48. Pipeboost vous permet même d'afficher un rapport sur la compression de votre serveur.
Update : je viens de découvrir ce post : http://dean.edwards.name/weblog/2007/08/js-compression/ où est recensé quelques autres outils de compression