Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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 &lt; 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

Posted: samedi 18 août 2007 12:46 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

FREMYCOMPANY a dit :

Sympa comme truc... Juste un détail, avec ce system, on perd l'autocomplete, non ?

# août 18, 2007 16:42

cyril a dit :

sous VS2005 oui, pas testé sous VS2008. Mais qui ce sert de l'autocomplétion sous VS2005 ? Ca m'induit plus en erreur qu'autre chose cette saloprie :p

sous VS2008, ca m'a l'air un peu mieux mais pas encore top

# août 18, 2007 17:01

FREMYCOMPANY a dit :

Lol, je sais pas, moi je code mon JavaScript sous NotePad++ donc ;)

Par contre ce qui me chagrinerait c'est perdre la coloration syntaxique...

# août 18, 2007 17:08

FREMYCOMPANY a dit :

Et encore une petite remarque, je sais tu l'as tapé vite comme ca pour l'exemple mais e.preventDefault() ca ne marche que pour FireFox. Pour IE il faut faire e.cancelBubble = true; Et pour les autres ca n'existe pas et il faut prier qu'un return false en fin de méthode suffira ;)

# août 18, 2007 17:26

cyril a dit :

e.preventDefault() et un standard W3C.

T'a peut être lu vite mais je m'abonne à mon event grâce à $addHandler, et le framework que tu aimes si peu recréé un nouvel objet (Sys.DomEvent) 100% compatible W3C (tu peux acceder aux event originaux dans e.rawEvent qui eux seront différents selon le navigateur)

# août 18, 2007 18:05

FREMYCOMPANY a dit :

Ah ok, je ne connaissais pas cette subtilité d'ATLAS ;)

# août 18, 2007 18:52

pkno a dit :

Bonjour,

plutôt que de suggérer de supprimer les commentaires pour gagner des octets, et quand on voit le plat de spaghettis que sont certaines fonctions javascript disponibles sur le net, il faut peut-être plutôt privilegier une certaine simplicité de code et optimiser sa logique de programmation.

Le chemin le plus rapide pour aller d'un point A à un point B, c'est encore et toujours la ligne droite.

Principe que les codeurs ont parfois tendance à oublier.

Les commentaires ne sont pas responsables d'un sur-poids et sont nécessaires, s'ils sont judicieux, pour un travail en équipe.

c'est plutôt le manque d'analyse qui est responsable d'un code trop prolifique et inutile.

Après le client lourd, le client léger. Et maintenant le client riche...qui alourdi le nombre de fichier javascript à charger.

Certaines fonctionnalités "Ajax" sont certes très intéressantes et utiles, mais d'autres relèvent plus du gadget qu'autre chose.

Mais bon...comme disait feu Raymond BARRE : "c'est mon avis, et je le partage..."

# septembre 3, 2007 11:10

cyril a dit :

pkno, je suis tout à fait d'accord avec toi que malheureusement la plupart du temps les "developpeurs" utilisent du javascript sans le comprendre. Mais de plus en plus on travail sur des framework javascript. Perso j'ai écrit de zéro un énorme composant, au total il faisait plus de 80ko et une fois compressé il faisait plus que 20ko ... donc oui c'est utile mais seulement pour ceux qui font du javascript pas pour ceux qui utilisent des bidouilles en javascript, le cas de la majorité.

# septembre 3, 2007 19:08

pkno a dit :

Je suis d'accord.

Solutions proposées à tester donc !

# septembre 4, 2007 08:51

pkno a dit :

re salut,

suis désolé de revenir sur le sujet, mais après un rapide coup d'oeil sur le résultat des solutions proposées par le javascript Minifier et sur le CSS par poppyto : pour un projet personnel passe encore si t'es tout seul à travailler sur tes projets et que tu veux perdre du temps si tu dois revenir sur ton code 3 mois après.

Mais dans le cadre d'un travail en entreprise (en équipe ou pour tes successeurs) : A BANIR ABSOLUMENT !!

Supprimer la mise en forme du code, l'indentation, c'est un bon moyen pour faire perdre du temps donc de l'argent aux développeurs qui prendront la suite.

Le CCS généré est illisible, le javascript sur une seule ligne de 3 mètre de long : merci le scrollbar horizontal !!

A l'heure où l'on parle de l'usine logicielle et de l'industrialisation du logicielle qui passe par des méthodes, des outils et du code propre(cf l'étude du Groupe test - pôle Hors media : http://msdn2.microsoft.com/fr-fr/teamsystem/bb418705.aspx) et à l'heure où les fournisseurs d'accès ne propose plus que des accès à haut débit : 20Ko au lieu de 80Ko ça se joue en dixième de seconde.

L'efficacité ne se joue pas là.

Mais bon...je me répète, comme disait l'autre...

# septembre 4, 2007 09:47

cyril a dit :

euh ???

Quand tu fais une appli et que tu donnes la main à quelqu'un d'autre tu lui donne pas le .exe mais tu lui donne les sources ... ;-)

Si tu regardes bien ce que j'ai écrit on parle de handler, ou de compactage à la volée. C'est à dire que les sources originales seront toujours présentes ! A quoi bon commenter si c'est pour tout enlever ensuite ? :-)

En plus le compactage rend plus compliqué de piquer le code d'une autre boite, c'est une sorte de protection.

# septembre 4, 2007 13:23

pkno a dit :

---

Quand tu fais une appli et que tu donnes la main à quelqu'un d'autre tu lui donne pas le .exe mais tu lui donne les sources

---

=&gt;j'ai bien compris d'autant qu'on parle d'application web et de languages côté client.

Je disais juste que compacter du code le rend illisible donc plus difficile à maintenir dans un cadre professionel.

---

A quoi bon commenter si c'est pour tout enlever ensuite ?

---

=&gt;faut relire le début du texte, 2ème paragraphe :"On peut facilement réduire la taille de ces fichiers en supprimant les commentaires..."

Ce n'est pas moi qui le dit.

Je voulais juste préciser que de telle pratiques de compactage ne seront pas appréciées par des chefs de projets en milieux professionel, c'est tout.

Quand à la sorte de protection, certains éditeurs de texte te propose de mettre en forme le code.

je bosse sur une application en ligne en perpétuelle amélioration avec un serveur de production, un serveur de test et un serveur de développement, je ne vais pas m'amuser à compacter et décompacter du code pour faire une amélioration ou modification à chaque fois que j'ai besoin de toucher au code.

J'ai l'impression qu'on ne parle pas du même cadre de travail.

En tout cas, merci de tes conseils que j'ai déjà consulté en d'autres occasions.

Je te rassure on les apprécie:)

# septembre 4, 2007 14:44

cyril a dit :

oui mais non !

Pour moi un compacteur sert pour la livraison du "programme", en interne heureusement on garde les versions non compactés. Les versions compactées ne servent que pour la production, perso je ne vois meme pas les fichiers compressé que je génère puisque tout se passe via un handler ou alors à la compilation pour certains projets ...

Bref, oui on ne parle pas de la même chose. Les fichiers compressés ne servent pas pour les développeurs mais seulement pour les navigateurs :-)

# septembre 4, 2007 21:21

moBlur.org a dit :

Dernièrement je me suis mis a utiliser intensivement le JSON (JavaScript Object Notation). Le JSON est un mode léger d'échange de données que je trouve particulièrement adapté aux "XHR" (XmlHTTPRequest).

# février 24, 2008 02:19
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Nettoyage des versions de List Item avant migration depuis SharePoint On Premise vers SharePoint Online par Blog Technique de Romelard Fabrice le 08-08-2017, 15:36

- Office 365: Comment supprimer des éléments de liste SharePoint Online via PowerShell par Blog Technique de Romelard Fabrice le 07-26-2017, 17:09

- Nouveau blog http://bugshunter.net par Blog de Jérémy Jeanson le 07-01-2017, 16:56

- Office 365: Script PowerShell pour assigner des droits Full Control à un groupe défini par Blog Technique de Romelard Fabrice le 04-30-2017, 09:22

- SharePoint 20XX: Script PowerShell pour exporter en CSV toutes les listes d’une ferme pour auditer le contenu avant migration par Blog Technique de Romelard Fabrice le 03-28-2017, 17:53

- Les pièges de l’installation de Visual Studio 2017 par Blog de Jérémy Jeanson le 03-24-2017, 13:05

- UWP or not UWP sur Visual Studio 2015 ? par Blog de Jérémy Jeanson le 03-08-2017, 19:12

- Désinstallation de .net Core RC1 Update 1 ou SDK de Core 1 Preview 2 par Blog de Jérémy Jeanson le 03-07-2017, 19:29

- Office 365: Ajouter un utilisateur ou groupe dans la liste des Site collection Administrator d’un site SharePoint Online via PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-24-2017, 18:52

- Office 365: Comment créer une document library qui utilise les ContentTypeHub avec PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-22-2017, 17:06