Compacter du javascript

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (jesusonline)