MVC4 - Bundles - problema memoria

Buonasera a tutti.

Scrivo questo posto perché ho notato che le funzionalità di minificazione dei file javascript, fornite dalla Dll System.Web.Optimization, sono molto costose in termini di risorse di memoria. In particolare, su un applicativo in produzione, la sola minificazione dei file javascript allocava 50Mb di memoria RAM, a fronte di un insieme di file che pesano si e no 2Mb.

Ho spiegato come minificare file javascript e css in questo articolo :
MVC4 Minificazione file Javascript e CSS (Creazione Bundle)

Ora ecco un caso pratico:

Ho provato a creare un progetto MVC 4, con templates Razor.

Nel progetto base vengono creati 3 bundle per i javascript.

Ogni bundle richiamato (es. @Scripts.Render("~/bundles/jquery")) fà aumentare la memoria consumata di ca. 4Mb. Nella mia applicazione i Javascript sono diversi e quindi è probabile che sia per quello che arrivo a consumare 50Mb.

La cosa mi lascia molto perplesso perché a fronte di pochi Kb di script vengono allocati alcuni Mb in memoria.
Nella mia realtà aziendale, dove sullo stesso server sono installati diversi siti, questo è un problema non indifferente.

Credo che a questo punto l'unica soluzione sia quella di minificare e mergiare  i file in fase di compilazione e mettere il link diretto al file minificato nelle pagine. Purtroppo così allungo i tempi di produzione/bug fixing e aumentano le possibilità di errore (pubblicando solo i file non minificati e lasciando all'helper "Scripts" l'operazione di minificazione e merge, ho la certezza di quale file stia usando il sito e ho la possibilità di debuggare eventuali errori presenti solo in produzione).

Dopo alcune prove credo di aver isolato il problema.
Il consumo di memoria deve essere legato alle Trasformazioni, ovvero al processo dii minificazione, perchè sostituendo nella creazione dei bundle

System.Web.Optimization.ScriptBundle

con

System.Web.Optimization.Bundle

i file javascript vengono accodati in un unico file, non avviene la minificazione e la memoria utilizzata è quasi trascurabile.


Consiglio quindi di procedere in questo modo:

• minificare i file javascript alla compilazione, magari utilizzando le librerie di "YUI Compressor" o "Ajax Minifier"
• usare i bundle delle "System.Web.Optimization", senza la parte di minificazione "on the fly"

Spero di esservi stato utile.

---------------------

Luca Dalsass

Solution Architect and Development Manager at Totalcom Srl

MVC4 Minificazione file Javascript e CSS (Creazione Bundle)

Buongiorno a tutti

oggi vorrei condividere con voi una delle funzionalità da me più apprezzate, introdotte con la versione 4 del framework MVC: La minificazione dei file javascript e CSS. Aggregare e minificare i file javascript e CSS statici delle nostre applicazioni Web è una cosa buona e giusta. Già da tempo esistevano librerie .NET e non per fare questo, oggi, scaricando il pacchetto MVC4, ne ritroviamo una nuova.

Come prima cosa sappiate che dovrete usare Visual Studio 2010 o 2012.
Scaricate il pacchetto dal seguente indirizzo:

http://www.asp.net/mvc/mvc4

Una volta installato il pacchetto potrete creare facilmente un nuovo progetto Web, con framework MVC4.

Il progetto che verrà creato avrà una cartella "packages", con tutte le dll "Nuove", da poter includere nel vostro progetto. La libreria che fornisce le funzionalità per aggregare e minificare i file statici è la

    System.Web.Optimization

Per semplicità esaminiamo i file che sono presenti nel progetto base "ASP.NET MCV4 Web Applicazion".
In questo progetto troviamo i file javascript nella cartella "Scripts" e i file CSS nella cartella "Content".

La prima cosa da fare è capire come funzionano e come modificare i "Bundle". Questi "Bundle" sono degli insiemi di file. Aprite il file Global.asax e troverete la seguente riga

    BundleConfig.RegisterBundles(BundleTable.Bundles);

La funzione "RegisterBundles" contiene la creazione dei "Bundle":

// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

Questi Bundle vengono richiamati nel file di Layout (Razor o ASP.NET) dagli Helper "Scripts" e "Styles":

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

Questi Helper scrivono nell'html un output diverso, a seconda che l'applicazione sia configurata per essere eseguita in "Debug" o "Release". In Debug verranno richiamati TUTTI i file del bundle, singolarmente e non minificati. In Ralease i file dei Bundle verranno restituiti come un unico file, minificato. Il link al file conterrà inoltre un parametro "v", che varierà se uno dei file inclusi nel Bundle sarà variato. Questo assicurerà che gli utilizzatori del sito scarichino sempre l'ultima versione dei file statici.

ATTENZIONE! 

• Al momento, i Bundle ignorano i file se è presente solo la versione minificata (file con estensione .min.js )
• Al momento se sono presenti le due versioni di un file, quella minificata e quella non minificata, il Bundle include la versione minificata.

Spero che questo articolo vi sia stato d'aiuto.
Buon divertimento!