網頁

Web Optimization Framework 1.1.0-alpha1新功能預覽

1.0.0 to 1.1.0

Microsoft ASP.NET Web Optimization Framework 1.1.0-alpha1最快取得的方式是透過NuGet。此1.1.0版本除了修正一些Bug外,再提供三個功能,分別是「CDN fallback」、「Element template strings」、「Virtual Path Provider」。

Web Optimization Framework 1.1.0-alpha1

CDN後路

fallback我不知道怎麼翻譯比較好,但原意就是在使用CDN之後,如果CDN發生問題,可以有一條後路可走,就是可以為我們載入本機的jQuery。我們先回憶前一篇的解決方法:

BundleConfig組態檔:

  'bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
  '           "~/Scripts/jquery-{version}.js"))

  bundles.UseCdn = True
  ' http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_16
  ' https://developers.google.com/speed/libraries/devguide#jquery
  Dim jqCdnPath As String = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"
  bundles.Add(New ScriptBundle("~/bundles/jquery", jqCdnPath).Include(
              "~/Scripts/jquery-{version}.js"))
  

View:

  <body>
      @RenderBody()

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

          }
      </script>
      @RenderSection("scripts", required:=False)
  </body>
  

現在我們看看,如果升級至Web Optimization Framework 1.1.0-alpha1這個版本,有何改變:

  • 記得先升級Web Optimization Framework套件,以下程式才能正確執行。NuGet GUI記得選擇選【包括發行前版本】然後選【更新】,指令模式為【Install-Package Microsoft.AspNet.Web.Optimization -Pre】最後的-pre要記得加。
  • 如果你在未安裝ASP.NET and Web Tools 2012.2且非C#的專案,會出現無法安裝此Web Optimization Framework 1.1.0-alpha1訊息。目前ASP.NET and Web Tools 2012.2的功能只在能C#專案下測試。

BundleConfig組態檔:(以下為C#專案內容)

  bundles.UseCdn = true;
        BundleTable.EnableOptimizations = true;
        var jqd = new ScriptBundle("~/bundles/jquery", "badpath").Include(
                                   "~/Scripts/jquery-{version}.js");
        jqd.CdnFallbackExpression = "window.jquery";
        bundles.Add(jqd);
  

ScriptBundle方法原本第二個參數要傳入CDN路徑,但我們特意傳入一個不存在的路徑,這會使用在BundleTable.EnableOptimizations = true;時載入CDN的腳本失敗。最重要的是jqd.CdnFallbackExpression屬性,後這裡傳入判斷CDN腳本物件的字串,這裡我們傳入的判繼字串為"windows.jquery",最後由Add方法加入BundleCollection之中。

現在我們就建置然後啟動網站。注意,我們不需要在View裡加任何程式碼。啟動後,查看原始碼,最後兩行是:

   <script src="badpath"></script>
   <script>(window.jquery)||document.write('<script src="/bundles/jquery"><\/script>');</script>
  
CDN fallback

由最後的圖片證明,當CDN運作失敗時,我們可以即時載入伺服器端的jQuery腳本給用戶端,而不受CDN失敗的影響。

元素字串樣版

在前一篇,我們有介紹一個@Scripts.Url()方法並加入HTML5的async屬性:

   @* @Scripts.Render("~/bundles/modernizr") *@
   <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>
  

不過此方法失去了Razor的方便性,所以在Web Optimization Framework 1.1.0-alpha1版加入一個新的方法@Scripts.RenderFormat(),用法也很簡單:

   @Scripts.RenderFormat("<script src='{0}' async></script>","~/bundles/jquery")
  

這個語法類似String.Format()的應用,不但可以保留Razor的方便性,又可以自訂出我們想要的任何字串格字。以下是Scripts.RenderFormat()定義的說明:

//
// 摘要:
// Renders script tags for a set of paths based on a format string.
//
// 參數:
// tagFormat:
// Format string for defining the rendered script tags. For more details on
// format strings, see http://msdn.microsoft.com/en-us/library/txafckwd.aspx
//
// paths:
// Set of virtual paths for which to generate script tags.
//
// 傳回:
// HTML string containing the script tag or tags for the bundle.
//
// 備註:
// RenderFormat generates script tags for the supplied paths using the specified
// format string. It generates multiple script tags for each item in the bundle
// when System.Web.Optimization.BundleTable.EnableOptimizations is set to false.
// When optimizations are enabled, it generates a single script tag to a version-stamped
// URL which represents the entire bundle.
public static IHtmlString RenderFormat(string tagFormat, params string[] paths);

這會產生兩個結果,產生的原始碼為:

   <script src='badpath' async></script>
   <script>(window.jquery)||document.write('<script src="/bundles/jquery"><\/script>');</script>
  

因為我們有設定使用CDN版本,所以src還是指向我們所設定的badpath。

第二個結果是在開發模式下,先將CDN與最佳化設定關閉:

   bundles.UseCdn = false;
            BundleTable.EnableOptimizations = false;
  

建置與執行,然後查看原始碼:

   <script src='/bundles/jquery?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1' async></script>
  

原本使用CDN與判斷CDN的語法都不見了,會只動調整為開發模式下的語法。

支援Virtual Path Provider

Virtual Path Provider類別算是比較進階的應用,在書本第8.3節,我有應用這個類別寫了個小東西,讀者可以自行參考。

不過,簡言之,它提供可讓 Web 應用程式從虛擬檔案系統擷取資源的方法集。例如,在ASP.NET MVC裡的View,當我下了一個”/home/index“之後,它要如何去取得”~/Views/Home/Index.vbhtml“來輸出呢?虛擬路徑去取得實體檔案就是Virtual Path Provider類別主要的作用。

小結

Web Optimization Framework 1.1.0-alpha1應該不久就會成為正式版本,讀者可以看到,在易用性與實用性上又往上提升一大步。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。