ASP Combine

Con l’uscita del Service Pack 1 per il .NET Framework 3.5 è stata introdotta una nuova ed utilissima funzionalità che permette di ridurre il numero di chiamate verso file Javascript effettuate dal browser verso il server, ottimizzando così il traffico e le performance della pagina.
Ormai si fa sempre più uso di Javascript, che siano queste semplici chiamate AJAX o complesse animazioni, ed il numero di librerie esistenti (JQuery, ShadowBox, Prototype, ecc) ci impone di aggiungere reference continue alle nostre pagine, riducendone così le performance ed aumentado il traffico di rete.
Una soluzione consiste nel riunire tutti i file Javascript in un unico file, riducendo così il numero di chiamate dal browser verso il server.
Si provi ad immaginare la situazione in cui la nostra pagina web abbia le seguenti reference javascript

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/shadowbox.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="Scripts/customFunction.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="Scripts/jquery.delegate-1.1.min.js" type="text/javascript"></script>
<script src="Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="Scripts/shadowbox-jquery.js" type="text/javascript"></script>

Come si può vedere si hanno ben 8 file Javascript e, se nella stessa pagina è presente anche lo Script Manager di ASP.NET AJAX, il numero sale fino a 11, come mostrato dallo screenshot seguente:

old22-04-2009 21.04

Per ottimizzare le chiamate nello script manager è stata aggiunta una nuova sezione (CompisiteScript) che offre la possibilità di specificare tutti i file Javascript che devono essere accorpati in un unico file, come mostrato dallo snippet seguente:

<asp:ScriptManager ID="sm" runat="server" ScriptMode="Release" CompositeScript-ScriptMode="Release">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="Scripts/jquery-1.3.2.min.js" />
            <asp:ScriptReference Path="Scripts/shadowbox.js" />
            <asp:ScriptReference Path="Scripts/jquery.validate.min.js" />
            <asp:ScriptReference Path="Scripts/customFunction.js"  />
            <asp:ScriptReference Path="Scripts/jquery.cookie.js" />
            <asp:ScriptReference Path="Scripts/jquery.delegate-1.1.min.js" />
            <asp:ScriptReference Path="Scripts/MicrosoftMvcAjax.js" />
            <asp:ScriptReference Path="Scripts/shadowbox-jquery.js"  />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

Questo permette di ridurre pesantemente le chiamate del browser da 11 a 5 (4 dello script manager ed 1 per tutti i file sopra specificati), come mostrato qui di seguito.

 22-04-2009 21.21

Anche se il test è stato effettuato su una macchina di sviluppo e non in una condizione reale, si può gia notare come il tempo di esecuzione della pagina si sia ridotto da 12.77 secondi a 5.44 secondi, come mostrato dall’immagine seguente:

22-04-2009 21.04

Ovviamente il tutto può essere impostato anche lato Object Oriented, eliminando però la possibilità di effettuare cambiamenti a runtime.

sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/jquery-1.3.2.min.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/shadowbox.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/jquery.validate.min.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/customFunction.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/jquery.cookie.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/jquery.delegate-1.1.min.js"));
sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/MicrosoftMvcAjax.js"));sm.CompositeScript.Scripts.Add(new ScriptReference("Scripts/shadowbox-jquery.js"));

Successivamente si vedrà come implementare lo stesso tipo di ottimizzazione in un’applicativo che fa uso del nuovo framework ASP.NET MVC, andando a migliorare l’output dei file javascript.


Comments