Mengapa menggunakan @ Scripts.Render (“~ / bundles / jquery”)

217

Bagaimana

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

berbeda dengan hanya mereferensikan skrip dari html seperti ini

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

Apakah ada keuntungan kinerja?

Tom Squires
sumber
Bagaimana cara menambahkan type = "text / css" - stackoverflow.com/questions/15662096/…
LCJ

Jawaban:

288

Bundling adalah tentang mengompresi beberapa file JavaScript atau stylesheet tanpa memformat apa pun (juga disebut dengan minified) menjadi satu file untuk menyimpan bandwidth dan jumlah permintaan untuk memuat halaman.

Sebagai contoh, Anda dapat membuat bundel Anda sendiri:

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

Dan render seperti ini:

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

Satu lagi kelebihan dari @Scripts.Render("~/bundles/mybundle")yang asli <script src="~/bundles/mybundle" />adalah yang @Scripts.Render()akan menghargai web.configpengaturan debug:

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

Jika debug="true"demikian, ia akan membuat tag skrip individual untuk setiap skrip sumber, tanpa minifikasi apa pun.

Untuk stylesheet Anda harus menggunakan StyleBundle dan @ Styles.Render ().

Alih-alih memuat setiap skrip atau gaya dengan satu permintaan (dengan skrip atau tag tautan), semua file dikompresi menjadi file JavaScript atau stylesheet tunggal dan dimuat bersama.

yan.kun
sumber
9
Hanya ingin tahu: apakah ada file yang disimpan di suatu tempat untuk bundel itu atau hanya ada di memori?
Elliot
15
Itu disimpan dalam cache.
NicoJuicy
4
Itu juga dapat diatur untuk secara otomatis menggunakan CDN dan mundur ke skrip lokal jika CDN tidak tersedia. Ini cukup apik.
Dan Esparza
39
Ada manfaat tambahan untuk melakukan ini. Saat debugging, Scripts.Render akan menampilkan setiap file tanpa ikatan, yang membuat pengembangan lokal tidak terlalu merepotkan, tetapi dalam lingkungan langsung, ini akan menampilkan hasil yang dibundel / diperkecil, yang dapat menyebabkan peningkatan kinerja seperti dijelaskan di atas, tetapi tanpa mengubah kode apa pun.
Sethcran
9
Dalam templat "dasar" dari MVC4 (Visual Studio), bundel disiapkan dalam "BundleConfig.cs" (folder App_Start).
Apolo
51

Anda juga bisa menggunakan:

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

Untuk menentukan format output Anda dalam skenario di mana Anda perlu menggunakan Charset, Type, dll.

Termato
sumber
3
Juga sangat berguna untuk memuat modul needsejs
Phil
13
... atau untuk menambahkan asyncatribut.
Christoph Fink
7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee
1
... atau untuk menambahkan atribut crossorigin = "anonim"
Alexandre Swioklo