ทำไมต้องใช้ @ Scripts.Render (“ ~ / bundles / jquery”)


217

ได้อย่างไร

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

แตกต่างจากการอ้างอิงสคริปต์จาก html เช่นนี้

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

มีประสิทธิภาพเพิ่มขึ้นหรือไม่?


ฉันจะเพิ่ม type =“ text / css” ได้อย่างไร - stackoverflow.com/questions/15662096/…
LCJ

คำตอบ:


288

การรวมเป็นข้อมูลเกี่ยวกับการบีบอัดไฟล์ JavaScript หรือ stylesheets หลายไฟล์โดยไม่มีการจัดรูปแบบ (หรือเรียกว่าย่อขนาด) ลงในไฟล์เดียวสำหรับการบันทึกแบนด์วิดท์และจำนวนคำขอที่จะโหลดหน้าเว็บ

ตัวอย่างเช่นคุณสามารถสร้างมัดของคุณเอง:

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

และทำให้มันเป็นเช่นนี้:

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

ข้อได้เปรียบอีกข้อหนึ่งของ@Scripts.Render("~/bundles/mybundle")ภาษาที่ใช้<script src="~/bundles/mybundle" />คือ@Scripts.Render()การweb.configตั้งค่าการแก้ไขข้อบกพร่อง:

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

หากเป็นเช่นdebug="true"นั้นจะแสดงแท็กสคริปต์แต่ละแท็กแทนสคริปต์ต้นฉบับแต่ละรายการโดยไม่มีการลดขนาดลง

สำหรับสไตล์ชีตคุณจะต้องใช้ StyleBundle และ @ Styles.Render ()

แทนที่จะโหลดแต่ละสคริปต์หรือสไตล์ด้วยคำขอเดียว (พร้อมแท็กสคริปต์หรือลิงก์) ไฟล์ทั้งหมดจะถูกบีบอัดลงในไฟล์ JavaScript หรือสไตล์ชีทเดียวและโหลดเข้าด้วยกัน


9
แค่สงสัยว่า: มีไฟล์ที่จัดเก็บไว้ที่ใดที่หนึ่งสำหรับบันเดิลนั้นหรือมีอยู่ในหน่วยความจำหรือไม่?
Elliot

15
มันถูกเก็บไว้ในแคช
NicoJuicy

4
นอกจากนี้ยังสามารถตั้งค่าให้ใช้ CDN โดยอัตโนมัติและสำรองไปยังสคริปต์ท้องถิ่นหาก CDN ไม่พร้อมใช้งาน มันค่อนข้างเนียน
Dan Esparza

39
มีประโยชน์เพิ่มเติมในการทำเช่นนี้ เมื่อทำการดีบั๊ก Scripts.Render จะส่งออกไฟล์แยกแต่ละไฟล์ซึ่งทำให้การพัฒนาในท้องถิ่นมีความเจ็บปวดน้อยลง แต่ในสภาพแวดล้อมที่มีชีวิตสิ่งนี้จะแสดงผลลัพธ์ที่รวมเป็นกลุ่ม / ลดขนาดซึ่งสามารถนำไปสู่การเพิ่มประสิทธิภาพตามที่อธิบายไว้ข้างต้น เปลี่ยนรหัสใด ๆ
Sethcran

9
ในแม่แบบ "พื้นฐาน" ของ MVC4 (Visual Studio) ชุดข้อมูลจะถูกจัดเตรียมไว้ใน "BundleConfig.cs" (โฟลเดอร์ App_Start)
Apolo

51

คุณยังสามารถใช้:

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

เพื่อระบุรูปแบบของผลลัพธ์ของคุณในสถานการณ์ที่คุณต้องใช้ Charset, Type, ฯลฯ


3
ยังมีประโยชน์อย่างมากสำหรับการโหลดโมดูล requirejs
Phil

13
... หรือเพื่อเพิ่มasyncคุณสมบัติ
Christoph Fink

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

1
... หรือเพื่อเพิ่มแอตทริบิวต์ crossorigin = "ไม่ระบุชื่อ"
Alexandre Swioklo
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.