Warum @ Scripts.Render verwenden ("~ / bundles / jquery")


Antworten:


288

Beim Bündeln geht es darum, mehrere JavaScript- oder Stylesheets-Dateien ohne Formatierung (auch als minimiert bezeichnet) in einer einzigen Datei zu komprimieren, um die Bandbreite und die Anzahl der Anforderungen zum Laden einer Seite zu speichern.

Als Beispiel könnten Sie Ihr eigenes Bundle erstellen:

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"))

Und machen Sie es so:

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

Ein weiterer Vorteil @Scripts.Render("~/bundles/mybundle")gegenüber dem Native <script src="~/bundles/mybundle" />besteht darin, dass @Scripts.Render()die web.configDebug-Einstellung berücksichtigt wird:

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

In debug="true"diesem Fall werden stattdessen einzelne Skript-Tags für jedes Quellenskript ohne Minimierung gerendert.

Für Stylesheets müssen Sie ein StyleBundle und @ Styles.Render () verwenden.

Anstatt jedes Skript oder jeden Stil mit einer einzigen Anforderung (mit Skript- oder Link-Tags) zu laden, werden alle Dateien in eine einzige JavaScript- oder Stylesheet-Datei komprimiert und zusammen geladen.


9
Ich frage mich nur: Gibt es irgendwo eine Datei für dieses Bundle oder existiert sie nur im Speicher?
Elliot

15
Es ist im Cache gespeichert.
NicoJuicy

4
Es kann auch so eingestellt werden, dass automatisch ein CDN verwendet wird und auf lokale Skripte zurückgegriffen wird, wenn das CDN nicht verfügbar ist. Es ist ziemlich schlau.
Dan Esparza

39
Dies hat einen zusätzlichen Vorteil. Beim Debuggen gibt Scripts.Render jede entbündelte Datei aus, was die lokale Entwicklung wesentlich weniger schmerzhaft macht. In einer Live-Umgebung wird jedoch das gebündelte / minimierte Ergebnis ausgegeben, was zu den oben beschriebenen Leistungssteigerungen führen kann, jedoch ohne Code ändern.
Sethcran

9
In der "Basis" -Vorlage von MVC4 (Visual Studio) werden Bundles in "BundleConfig.cs" (Ordner "App_Start") vorbereitet.
Apolo

51

Sie können auch verwenden:

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

So legen Sie das Format Ihrer Ausgabe in einem Szenario fest, in dem Sie Zeichensatz, Typ usw. verwenden müssen


3
Auch sehr nützlich zum Laden von erforderlichen Modulen
Phil

13
... oder um das asyncAttribut hinzuzufügen .
Christoph Fink

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

1
... oder um das Attribut crossorigin = "anonym" hinzuzufügen
Alexandre Swioklo
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.