Perché usare @ Scripts.Render (“~ / bundles / jquery”)


Risposte:


288

Il raggruppamento consiste nel comprimere diversi file JavaScript o fogli di stile senza alcuna formattazione (nota anche come minimizzata) in un singolo file per salvare la banda e il numero di richieste per caricare una pagina.

Ad esempio puoi creare il tuo pacchetto:

bundles.Add(New ScriptBundle("~/bundles/mybundle").Include(
            "~/Resources/Core/Javascripts/jquery-1.7.1.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-1.8.16.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.unobtrusive.min.js",
            "~/Resources/Core/Javascripts/jquery.unobtrusive-ajax.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-timepicker-addon.js"))

E renderlo in questo modo:

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

Un altro vantaggio di @Scripts.Render("~/bundles/mybundle")oltre il nativo <script src="~/bundles/mybundle" />è che @Scripts.Render()rispetterà l' web.configimpostazione di debug:

  <system.web>
    <compilation debug="true|false" />

In debug="true"tal caso , verrà invece eseguito il rendering di singoli tag di script per ogni script di origine, senza alcuna minificazione.

Per i fogli di stile dovrai usare StyleBundle e @ Styles.Render ().

Invece di caricare ogni script o stile con una singola richiesta (con tag script o link), tutti i file vengono compressi in un singolo file JavaScript o foglio di stile e caricati insieme.


9
Mi chiedo solo: esiste un file memorizzato da qualche parte per quel pacchetto o esiste solo in memoria?
Elliot

15
È archiviato nella cache.
NicoJuicy,

4
Può anche essere impostato per utilizzare automaticamente un CDN e fallback su script locali se il CDN non è disponibile. È piuttosto elegante.
Dan Esparza,

39
C'è un ulteriore vantaggio nel fare questo. Durante il debug, Scripts.Render produrrà ogni file disaggregato, il che rende lo sviluppo locale molto meno problematico, ma in un ambiente live, questo produrrà il risultato raggruppato / minimizzato, che può portare a miglioramenti delle prestazioni come descritto sopra, ma senza cambiando qualsiasi codice.
Sethcran,

9
Nel modello "base" di MVC4 (Visual Studio), i pacchetti vengono preparati in "BundleConfig.cs" (cartella App_Start).
Apolo,

51

Puoi anche usare:

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/mybundle")

Per specificare il formato dell'output in uno scenario in cui è necessario utilizzare Charset, Tipo, ecc.


3
Utilissimo anche per caricare i moduli requestjs
Phil

13
... o per aggiungere l' asyncattributo.
Christoph Fink,

7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee,

1
... o per aggiungere l'attributo crossorigin = "anonymous"
Alexandre Swioklo,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.