2012-06-26 4 views
10

Sto implementando il supporto di bundling e minification in MVC4 e sembra che stia rendendo i miei file javascript più grandi di se non fossero in bundle/minificati. Sto usando l'ultima build disponibile in nuget (opzione pre-release su). Ho il seguente pacchetto impostato nella mia classe RegisterBundles.Perché il raggruppamento e la minimizzazione di MVC4 rendono più grandi i miei file?

bundles.Add(new ScriptBundle("~/bundles/baseJS").Include(
        "~/Scripts/jquery-1.7.1.js", 
        "~/Scripts/jquery.cookie.js", 
        "~/Scripts/jquery-ui-1.8.11.js", 
        "~/Scripts/bootstrap.js", 
        "~/Scripts/jquery.pjax.js", 
        "~/Scripts/kendo/2012.1.515/js/kendo.all.min.js", 
        "~/Scripts/jquery.jstree.js", 
        "~/Scripts/jquery.unobtrusive-ajax.js", 
        "~/Scripts/jquery.validate.js", 
        "~/Scripts/jquery.validate.unobtrusive.js", 
        "~/RIS.Scripts/PostJson.js")); 

E sto caricando nel mio _Layout.cshtml utilizzando

@Scripts.Render("~/bundles/baseJS") 

Quando aggiungo i byte ricevuti in Fiddler per questi script in modalità debug ottengo il seguente

Name      Size(bytes) 
jquery      98013 
jquery cookie    1455 
jquery ui     124704 
bootstrap     52378 
pjax      8138 
kendo.all     219751 
jstree      55045 
unobtrusive-ajax   2492 
validate     13323 
validate-unobtrusive  5138 
postjson     634 

Total      581071 

E quando lo eseguo sul mio server di produzione ottengo il seguente da Fiddler per l'intero pacchetto js.

Bytes Received: 999,396  

Cosa sta succedendo qui? La maggior parte dei file è in qualche misura limitata, ma non dovrebbe quasi raddoppiare le dimensioni del mio carico utile.

Ulteriori Dettagli- Quando ho scaricare i file js fuori la mia casella di dev locale (violinista riportato dimensione 379KB) e il server (violinista riportato dimensione 999kb) e metterli in kdiff sono binari identici. Quando guardo la scheda di rete degli strumenti di sviluppo di Chrome, il server locale scarica 379kb, ma il valore 'Parser' è 975kb. Qual è il valore di questo parser. Potrebbe essere che ci sia qualche impostazione di compressione IIS che non è impostata sul mio server ma sul mio server IIS locale? L'unica differenza che noto è il fatto che l'IIS Express in esecuzione sulla mia macchina di sviluppo è 8.0 dove il server è IIS 7.5.

risposta

12

Molto probabilmente ciò che state vedendo qui è una delle debug/release 'magica' che viene dalla FileExtensionReplacementList.

Prendiamo ad esempio jQuery. In genere nella cartella degli script verranno visualizzate due copie di ciascun file, ad esempio jquery-1.6.2.js e jquery-1.6.2.min.js.

Per l'ottimizzazione di default userà la versione min.js quando debug=false, e utilizzare il normale jquery-1.6.2.js quando debug=true, dal momento che in genere che rende più facile il debug (nessun accorpamento e nessuna minimizzazione del fascio).

Questa selezione di file "magic" è controllata tramite FileExtensionReplacementList su BundleCollection.

Nella prossima versione (RTM), ci sarà un po 'più granularità in questo elenco, come in genere gli sviluppatori vorranno colpire quando questi sono devono essere utilizzati, vale a dire

list.Add("min", OptimizationMode.WhenEnabled); 
list.Add("debug", OptimizationMode.WhenDisabled); 
+0

Nota: Hao è lo sviluppatore principale su bundling/minification per ASP.NET – RickAndMSFT

+2

Se capisco correttamente la risposta, credo che la mia domanda sia il motivo per cui la minificazione di Jquery è più stretta di quella di ASP.net? – PlTaylor

4

L'opzione di raggruppamento è attiva, ma l'operazione di minimizzazione viene eseguita tramite un'impostazione BundleTable.EnableOptimizations = true e alcune opzioni di "trasformazione" che non sono state attivate. Vedi CssMinify e JsMinify.

Qualcosa sulla falsariga di:

 var b1 =new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-1.*"); 

     b1.Transforms.Add(new JsMinify()); 

     bundles.Add(b1); 

- e -

BundleTable.EnableOptimizations = true;  
+0

proverò questo primo cosa al mattino .... ma perché lo renderebbe più grande? Questa è la parte che mi sta davvero confondendo. – PlTaylor

+0

Hai ragione riguardo a b1.transforms.Add (new JsMinify()); questo risolve il mio problema e il download totale è inferiore alla somma dei file non miniati. The EnableOptimizations = true; si limita a eseguire il debugging e raggruppa e minimizza tutto sulla tua casella di sviluppo locale come se fosse sul server. – PlTaylor

+0

Ok quando l'ho eseguito sul mio box di sviluppo con EnableOptimizations = true; ha raggruppato e ridotto il file js a 388.447 byte, il che equivale a ciò che mi aspetterei. Quando lo distribuisco sul mio server senza modifiche al codice, è 999.350 byte. Come può essere? – PlTaylor