Chuẩn bị CDN url tới đầu ra gói mvc 4

Question

Sử dụng bộ đóng gói MVC4 được tích hợp sẵn, làm cách nào để thêm url CDN của tôi vào các thẻ liên kết mà nó tạo ra? Tôi đã thiết lập Amazon Cloudfront để nó lấy nội dung từ máy chủ web của tôi khi được yêu cầu lần đầu. Vì vậy, khi tôi định nghĩa một bó như vậy:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/reset.css", 
    "~/Content/960_24_col.css", 
    "~/Content/Site.css" 
)); 

Khi triển khai, tôi có thể tham khảo nó như sau:

http://[cloundfrontid].cloudfront.net/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1 

Bây giờ tôi chỉ cần thay đổi các liên kết được tạo ra bởi bundler từ việc liên quan đến liên kết tuyệt đối chỉ vào CDN của tôi.

<link href="[INSERT_CDN_URL_HERE]/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1" rel="stylesheet"/> 

Tôi nghĩ rằng có thể viết lại đường dẫn bằng IBundleTransform nhưng tôi không thể tìm thấy bất kỳ ví dụ nào về điều này.

LƯU Ý: Chỉ cần rõ ràng, tôi biết bạn có thể chỉ định liên kết CDN cho một gói, nhưng điều đó chỉ hoạt động nếu gói có thể được thay thế bằng liên kết tĩnh.

Answer 1

tôi chỉ thiết lập MaxCDN và chạy vào cùng một vấn đề chính xác.

Như bạn đã biết, thuộc tính bundles.UseCdn không lý tưởng vì chúng tôi không muốn chỉ định url chính xác cho gói. Một CDN như Max CDN là cùng một url, chuỗi truy vấn chính xác và tất cả, ngoại trừ một tên miền phụ khác.

Đây là cách tôi giải quyết nó.

Tôi đã tạo một lớp BundleHelper sẽ bao bọc phương thức hiển thị và sau đó thêm đường dẫn với tên miền phụ CDN.

Dưới đây là những gì các lớp trông giống như:

namespace MyDomain.Web.Helpers 
{ 
    public class BundleHelper 
    { 
     public static string CdnPath = "http://cdn.mydomain.com"; 

     public static IHtmlString RenderScript(string path) 
     { 
      var opt = System.Web.Optimization.Scripts.Render(path); 
      string htmlString = HttpUtility.HtmlDecode(opt.ToHtmlString()); 

      if (BundleTable.EnableOptimizations) 
      { 
       htmlString = htmlString.Replace("<script src=\"/", String.Format("<script src=\"{0}/", CdnPath)); 
      } 

      return new HtmlString(htmlString); 
     } 

     public static IHtmlString RenderStyle(string path) 
     { 
      var opt = System.Web.Optimization.Styles.Render(path); 
      string htmlString = HttpUtility.HtmlDecode(opt.ToHtmlString()); 

      if (BundleTable.EnableOptimizations) 
      { 
       htmlString = htmlString.Replace("<link href=\"/", String.Format("<link href=\"{0}/", CdnPath)); 
      } 

      return new HtmlString(htmlString); 
     } 
    } 
} 

Sau đó, để sử dụng nó trong các quan điểm, tôi chỉ cần làm:

@BundleHelper.RenderStyle("~/Content/css") 
@BundleHelper.RenderStyle("~/Content/themes/base/css") 

@BundleHelper.RenderScript("~/bundles/jquery") 
@BundleHelper.RenderScript("~/bundles/jqueryui") 

Hope this helps.

Answer 2

hãy có một cái nhìn @Using a CDN tìm kiếm cho "Sử dụng một CDN"

Như đã nói bởi By Rick Anderson trong asp.net/mvc,

Mã sau thay thế jQuery địa phương bó với một Gói CDN jQuery .

public static void RegisterBundles(BundleCollection bundles) 
    { 
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //   "~/Scripts/jquery-{version}.js")); 

    bundles.UseCdn = true; //enable CDN support 

    //add link to jquery on the CDN 
    var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; 

    bundles.Add(new ScriptBundle("~/bundles/jquery", 
       jqueryCdnPath).Include(
       "~/Scripts/jquery-{version}.js")); 

    // Code removed for clarity. 
    } 

Trong đoạn mã trên, jQuery sẽ được yêu cầu từ CDN trong khi ở chế độ phát hành và phiên bản debug của jQuery sẽ được lấy tại địa phương trong chế độ gỡ lỗi. Khi sử dụng CDN, bạn nên có cơ chế dự phòng trong trường hợp yêu cầu CDN không thành công. Đoạn mã đánh dấu sau đây từ cuối của tệp bố cục hiển thị tập lệnh được thêm vào để yêu cầu jQuery nên thiếu CDN.

</footer> 

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

     <script type="text/javascript"> 
      if (typeof jQuery == 'undefined') { 
       var e = document.createElement('script'); 
       e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")'; 
       e.type = 'text/javascript'; 
       document.getElementsByTagName("head")[0].appendChild(e); 

      } 
     </script> 

     @RenderSection("scripts", required: false) 
    </body> 
</html> 

Trong đã dán đoạn từ Asp.net/MVC, trong trường hợp bạn tìm thấy nó hữu ích sau đó Cheers cho Rick Anderson cho bài của mình ...

Answer 3

Hãy nhìn vào câu trả lời của tôi đến một câu hỏi tương tự ở đây: https://stackoverflow.com/a/18500359/725626

xây dựng dựa trên câu trả lời của BigJoe714 và trình bày một thay thế hơi khác nhau.