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

217

Wie geht das?

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

unterscheiden sich davon, nur das Skript von HTML wie folgt zu referenzieren

<script src="~/bundles/jquery.js" type="text/javascript"></script>

Gibt es Leistungssteigerungen?

Tom Squires
quelle
Wie füge ich type = „text / css“ - stackoverflow.com/questions/15662096/...
LCJ

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.

yan.kun
quelle
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

Termato
quelle
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