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!

Utilizzare i file di risorsa .NET nel javascript

Buongiorno a tutti

oggi vorrei condividere un idea che ho trovato e sviluppato per utilizzare i file di risorse all'interno dei file javascript. La soluzione prevede l'utilizzo dei file di risorse che l'ambiente di sviluppo .NET mette a disposizione.

Negli ultimi tempi, date le nuove tendenze in fatto di sviluppo web, mi sono ritrovato a dover scrivere montagne di file javascript. Le applicazioni che sono solito sviluppare utilizzano interfacce multilingua, quindi mi sono ritrovato a sperimentare diverse soluzioni, per poter restituire dei messaggi all'utilizzatore, nella lingua in cui ha scelto di usare la mia applicazione.

Per massimizzare la resa delle mie applicazioni, in relazione al javascript, mi sono posto i seguenti obbiettivi:

• separare il codice javascript in file statici, di modo che il browser lo possa scaricare e mettere nella sua cache
• separare le traduzioni file diversi, uno per lingua, di modo che l'utilizzatore debba sempre scaricarsi solo il file con le traduzioni per la lingua scelta.

Vediamo come procedere, passo passo

Creare un'applicazione Web. Nel mio caso ho utilizzato il framework MVC, con template Razor.

Aggiungere i file di risorse per le traduzioni. Nel mio caso ho aggiunto un file "Translation.resx" per la lingua principale e un file Translation.de.resx per la lingua tedesca.

Volendo utilizzare questi file in una pagina del sito potremmo mododamente scrivere

Resources.Global.MyResourceName

Per poter fare lo stesso in un file javascript occorre fare ancora qualche passaggio.
Aggiungete un controller all'applicazione. Nel mio caso ho aggiunto un controller "Scripts"

Modificate il codice del metodo Index, come segue. In pratica non dovete fare altro che passare alla vista il codice della lingua corrente.

 public ActionResult Index()
        {
            var cultureInfo = new System.Globalization.CultureInfo((Request.RequestContext.RouteData.Values["id"] ?? "it").ToString());

            return View(cultureInfo);
        }

Modificate la vista Index come segue. Quello che la vista genererà sarà un oggetto Javascript, con tatnte proprietà, quante sono le risorse presenti nel file "Translations.resx"

@model System.Globalization.CultureInfo
@using System.Linq
@using System.Collections.Generic

ResourcesClass = function () {

    GlobalClass = function () {
      return {
            @{var allResources = Resources.Global.ResourceManager.GetResourceSet(System.Globalization.CultureInfo.InvariantCulture, true, true);
              var localizedResources = Resources.Global.ResourceManager.GetResourceSet(Model, true, true);
             }

            @foreach (System.Collections.DictionaryEntry invariantEntry in allResources)
            {
                var entry = invariantEntry;
                foreach(System.Collections.DictionaryEntry localizedEntry in localizedResources)
                {
                    if (localizedEntry.Key == invariantEntry.Key)
                    {
                        entry = localizedEntry;
                    }
                }
                
                @entry.Key<text> : '</text>@Html.Raw(entry.Value.ToString().Replace("'", "\\'"))<text>',</text>@System.Environment.NewLine
            }
        }
    }

    var iGlobalManager = new GlobalClass();

    return {
        Global: iGlobalManager
    };
}


var Resources = new ResourcesClass();

Aggiungete alla masterpage del vostro sito questa riga, con la quale richiamate il risultato della action index del controller Scripts, come fosse un file javascript.

<script src="/Scripts/Index/@System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName"></script>

A questo punto il gioco è fatto. Nei vostri file javascript potete accedere alle risorse dei file resx, esattamente come da una pagina web.

window.load = function()
{
alert(Resources.Global.MyResourceName)
}

Spero che questo articolo possa esservi d'aiuto!