Compacter du javascript

Soyez le premier à donner votre avis sur cette source.

Vue 14 703 fois - Téléchargée 446 fois

Description

Avec l'avenement "du Web 2.0", on est de plus en plus souvent amené à rajouter du javascript dans notre page, ce qui a pour effet de faire gonfler la taille de la page.

Vous trouverez tout d'abord dans cette source, une classe qui permet de compresser du javascript, j'ai utilisé l'implémentation C# de la classe de Douglas Crockford : http://javascript.crockford.com/jsmin.html. Pour compresser du javascript il vous suffit de faire JavaScriptMinifier.Minify(originalString).

Vous trouverez également un contrôle Script qui permet de rajouter du JavaScript et le compresser directement dans la page. Pour cela il vous faut ajouter l'assembly dans le web.config

<system.web>
<pages>
<controls>
<add tagPrefix="cs" namespace="CS.Web.UI" assembly="CS.Web.JSCompressor"/>
</controls>
</pages>

et vous pouvez ensuite utiliser le code ci dessous :

Source / Exemple :


<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>

<%-- 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>

Conclusion :


Tous le code JavaScript contenu dans la balise <cs:Script a été compressé et rajouté dans une meme balise <script. La propriété key contrôle permet de rajouté deux fois le meme script dans la page, il sera généré qu'une seule fois s'il a la même clé. Cela peut être utile si vous travailler avec différents UserControl.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mardi 18 juillet 2006
Statut
Membre
Dernière intervention
3 juillet 2008

Oups je viens de comprendre, la DLL System.Web.Extension n'était pas chargé. C'est pour ça qu'il ne trouvait pas la classe ScriptManager.

Désolé. :)
Messages postés
2
Date d'inscription
mardi 18 juillet 2006
Statut
Membre
Dernière intervention
3 juillet 2008

ScriptManager à la ligne 61 du fichier Script.cs n'est pas déclarer, ou du moins sous visual studio 2008 avec le framework ScriptManager n'est pas une propriété de PlaceHolder.
Du coup le projet ne compile pas, domage ce control avait l'air vraiment très intéressant.

ScriptManager.RegisterStartupScript(this, typeof(Script), this.Key, script, true);
Messages postés
153
Date d'inscription
vendredi 9 août 2002
Statut
Membre
Dernière intervention
18 septembre 2009

Bonjour Jesus,

Et pour une version qui le fait à la fois pour les fichiers javascript du site, et pour toutes les zones "script" des pages ?
Exemple : compacter le javascript de ASP.NET, compacter le javascript "perso"...
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
27
non, IIS permet de compresser en gzip, pas de supprimer les espaces inutiles. Bien sur il va de soit qu'il faut aussi activer la compression gzip.
Messages postés
23
Date d'inscription
vendredi 16 septembre 2005
Statut
Membre
Dernière intervention
1 décembre 2010

IIS intègre déjà 'la compression du site' lors de l'envoi vers le client, il suffit de l'activer...

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.