Tại sao nên sử dụng @ Sc Script.Render (ngay bây giờ ~ / bundles / jquery)


Câu trả lời:


288

Gói là tất cả về việc nén một số tệp JavaScript hoặc bảng định kiểu mà không có bất kỳ định dạng nào (còn được gọi là rút gọn) thành một tệp duy nhất để lưu băng thông và số lượng yêu cầu để tải trang.

Ví dụ, bạn có thể tạo gói của riêng mình:

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

Và kết xuất nó như thế này:

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

Một lợi thế nữa của @Scripts.Render("~/bundles/mybundle")bản địa <script src="~/bundles/mybundle" />@Scripts.Render()sẽ tôn trọng web.configcài đặt gỡ lỗi:

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

Nếu debug="true"sau đó, nó sẽ hiển thị các thẻ script riêng lẻ cho từng tập lệnh nguồn, mà không có bất kỳ sự thu nhỏ nào.

Đối với biểu định kiểu, bạn sẽ phải sử dụng StyleBundle và @ Styles.Render ().

Thay vì tải từng tập lệnh hoặc kiểu với một yêu cầu (có thẻ tập lệnh hoặc liên kết), tất cả các tệp được nén thành một tệp JavaScript hoặc biểu định kiểu và được tải cùng nhau.


9
Chỉ cần tự hỏi: có một tập tin được lưu trữ ở đâu đó cho gói đó hoặc nó chỉ tồn tại trong bộ nhớ?
Elliot

15
Nó được lưu trong bộ nhớ cache.
NicoJuicy

4
Nó cũng có thể được thiết lập để tự động sử dụng CDN và dự phòng cho các tập lệnh cục bộ nếu CDN không khả dụng. Nó khá đẹp.
Dan Esparza

39
Có một lợi ích bổ sung để làm điều này. Khi gỡ lỗi, Sc Script.Render sẽ xuất ra từng tệp không được xử lý, điều này làm cho sự phát triển cục bộ bớt đau đớn hơn, nhưng trong môi trường trực tiếp, điều này sẽ tạo ra kết quả được gói / rút gọn, có thể dẫn đến tăng hiệu suất như được mô tả ở trên, nhưng không có thay đổi bất kỳ mã.
Sethcran

9
Trong mẫu "cơ bản" của MVC4 (Visual Studio), các gói được chuẩn bị trong "BundleConfig.cs" (thư mục App_Start).
Apolo

51

Bạn cũng có thể dùng:

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

Để chỉ định định dạng đầu ra của bạn trong một kịch bản mà bạn cần sử dụng Bộ ký tự, Loại, v.v.


3
Cũng rất hữu ích để tải các mô-đun requestjs
Phil

13
... Hoặc để thêm asyncthuộc tính.
Christoph Fink

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

1
... hoặc để thêm thuộc tính crossorigin = "nặc danh"
Alexandre Swioklo
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.