Có phải là một cách thực hành tốt để có một gói cho mỗi lượt xem trong Asp Net MVC


8

Vì gói và thu nhỏ là tất cả về tối ưu hóa và làm cho các trang tải nhanh hơn, nên theo tôi, sẽ hợp lý khi tạo một gói cho tập lệnh và một gói cho kiểu trên mỗi cơ sở xem, do đó, để tải tất cả tập lệnh và kiểu mà trình duyệt sẽ cần để thực hiện tối đa 2 yêu cầu. Vì vậy, chúng ta hãy nói rằng tôi có một _Layout.cshtmlnơi mà tôi cần 3 js file bootstrap.js, jquery.jsvà một số custom1.jstôi có thể tạo ra một bó, một cái gì đó như thế này:

bundles.Add(new ScriptBundle("~/bundles/layout").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom1.js"));

Sau đó, hãy nói rằng tôi có một chế độ xem khác User.cshtmlmà tôi cần bootstrap.js, jquery.jscustom2.jsmột lần nữa tôi tạo một gói:

bundles.Add(new ScriptBundle("~/bundles/user").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom2.js"));

Cách tiếp cận tương tự có thể được sử dụng cho các gói phong cách. Nhưng từ những gì tôi thấy, đó không phải là một cách thông thường để làm theo cách này, thông thường các gói được tạo trên cơ sở loại, ví dụ: một cho bootstrap, một cho jquery, một cho các tệp js / css tùy chỉnh, v.v. Nhưng sẽ không làm tăng thời gian tải của trang, bởi vì có nhiều gói hơn có nghĩa là yêu cầu nhiều hơn đến máy chủ. Ngoài ra vấn đề của việc làm mọi thứ theo cách tôi đã mô tả lúc đầu là gì?

Câu trả lời:


4

Tôi nghĩ rằng nó gần như thậm chí sẽ phản tác dụng khi sử dụng một gói duy nhất trên mỗi trang.

Có một chi phí chung để tạo gói ... mặc dù, chi phí đó được phát sinh một lần cho mỗi phiên bản ứng dụng (được lưu bởi ứng dụng sau cuộc gọi đầu tiên), nhưng nếu bạn có gói mới cho mỗi trang, điều đó có nghĩa là cho mỗi trang riêng biệt bạn truy cập, một gói mới phải được tạo trước khi nó có thể được phục vụ. Điều đó sẽ mặc định mục đích của các gói đáng kể, tôi nghĩ.

Thay vào đó, tôi thường có hai gói: một gói lõi mà mọi trang dự kiến ​​sẽ yêu cầu và hầu như không bao giờ thay đổi một khi dự án ban đầu được thiết lập. Điều này bao gồm các kiểu lõi, jQuery / knockout, các thư viện nhà cung cấp cơ sở khác.

Gói thứ hai thường là bối cảnh cho mỗi ứng dụng (ví dụ: gói Người dùng có thể có các mô-đun liên quan đến người dùng nói chung, nhưng không nhất thiết phải là một trang cụ thể).

Bất cứ điều gì cụ thể trên trang không thường đi vào một gói.

Hiệu quả thực tế của gói (ít nhất là đối với các ứng dụng kinh doanh mà tôi có xu hướng viết) thực sự không tuyệt vời lắm, vì xét rằng một khi khách hàng đã gọi nó lần đầu tiên, thì nó sẽ ở đó cho đến khi nó thay đổi một lần nữa.

Nếu bạn có một trang web công cộng nơi bạn mong đợi số lượng khách truy cập lần đầu lớn hơn, bạn có thể có một cách tiếp cận hơi khác.


Bạn có nghĩa là "đánh bại mục đích", tôi đoán.
Craig

@Craig - Tôi đã làm, nhưng mặc định hầu như cũng hoạt động ...
jleach

3

Không.

Do bộ nhớ đệm trình duyệt, bạn có được kết quả tổng thể tốt nhất bằng cách sử dụng cùng một gói hoặc gói trên tất cả các trang. Điều này có nghĩa là người dùng sẽ tải xuống tất cả các css và js khi họ nhấn trang đầu tiên và sử dụng lại tệp đó trên các trang tiếp theo.

Cho rằng phần lớn các gói sẽ được đóng gói các khung javascript như jquery và bootstrap. Thêm vài byte mã tùy chỉnh của bạn có ảnh hưởng không đáng kể đến tốc độ tải trang chung.


2

Nhược điểm của một gói trên mỗi trang là gói được lưu trong bộ nhớ cache từ một trang không thể được sử dụng trên một trang khác, điều bạn thường muốn là phần lớn các tập lệnh của bạn (ví dụ: jQuery bootstrap, v.v.) được tải xuống một lần và được lưu trong bộ nhớ cache cho tất cả các trang trên trang web.

Giải pháp "tối ưu" từ góc độ bộ đệm sẽ là có một gói duy nhất chứa tất cả .js cho tất cả các trang trên toàn bộ trang, nhược điểm của phương pháp đó là gói kết thúc khá lớn, điều đó có nghĩa là tải trang ban đầu của bạn chậm hơn , có thể không được mong muốn đối với các trang web đối mặt với khách hàng nơi ấn tượng ban đầu là tất cả.

Giải pháp "tốt nhất" có thể sẽ là sự pha trộn của các kỹ thuật, ví dụ

  • Gói "lõi" (thứ như jQuery và Bootstrap được sử dụng trên hầu hết các trang), cộng với gói trên mỗi trang
  • Một gói duy nhất cho toàn bộ trang web, có thể loại trừ một trang nặng javascript, bổ sung rất nhiều vào kích thước gói

1
Chúng tôi cũng thường kết thúc với một hoặc hai gói "lite" cho các trang nhỏ không cần thuyền đầy đủ (trang đăng nhập, v.v.)
jleach
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.