Come associare correttamente stili e script in MVC 4?

Question

Per quanto mi piaccia MVC, così tanto non capisco il raggruppamento. Ho letto diversi documenti sul raggruppamento, ma non ho trovato un concetto generale fino ad ora come usarlo per i miei script e stili.

L'unica soluzione che funziona in modo coerente dopo molte ore di tentativi ed errori, è:

1. Crea bundle per lo script x.js con percorso relativo a/b/c come:

   var bundle = new ScriptBundle("~/a/b/c/bundle").Include("~/a/b/c/x.js"); 
   bundles.Add(bundle); 
   

2. Creare bundle per x.css stile con percorso relativo a/b/c come:

   var bundle = new StyleBundle("~/a/b/c/bundle").Include("~/a/b/c/x.css"); 
   bundles.Add(bundle); 
   

e di riferimento in Vista come

@Scripts.Render("~/a/b/c/bundle"); 
@Styles.Render(("~/a/b/c/bundle"); 

Ovviamente l'inconveniente è che per ogni percorso ho bisogno di un unico fascio con una chiave che è costruito come "percorso" + suffisso (io uso "pacco", ma tutto il resto farebbe anche).

Il mio percorso aspetto come:

• Content \

  • Calendario \
  • DatePicker \
  • jqGrid \
  • Template \
    • FontA wesome \
  • ...

• script

  • DayPilot
  • jqGrid
  • jqPlot
  • ...

Esiste qualche modo intelligente/best practice su come creare e utilizzare i pacchetti o organizzare il percorso per script e stili?

Commento: Non vedo questa domanda come duplicata di How to Bundle and render scripts in mvc 4 -- asp.net? anche quando i titoli sono abbastanza simili.

Answer 1

Il raggruppamento e la minimizzazione migliorano il tempo di caricamento riducendo il numero di richieste al server e riducendo la dimensione delle risorse richieste (come CSS e JavaScript). È possibile creare un singolo pacchetto per tutti i CSS, ma raggruppare separatamente i contenuti correlati al venditore e personalizzati, aumenta la gestibilità. Il bundle viene trattato come un singolo file CSS/Javascript e richiederà una richiesta anche se il tempo richiesto per il caricamento aumenterà.Per ridurre il tempo di caricamento, pensa di ridurre il contenuto del pacchetto aggiungendo il seguente

BundleTable.EnableOptimizations = true; 

nel metodo di registrazione del pacchetto.

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-{version}.js"));  

    BundleTable.EnableOptimizations = true; 
} 

Utilizzando CDN per jQuery e altri standard CSS/Javascript è un buon approccio, come il contenuto viene caricato in parallelo da diversi server.

http://www.asp.net/mvc/overview/performance/bundling-and-minification