ASP.NET MVC 4 RC的JS/CSS打包壓縮功能

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

打包(Bundling)及壓縮(Minification)指的是將多個js檔案或css檔案打包成單一檔案並壓縮的做法，如此可減少瀏覽器需下載多個檔案案才能完成網頁顯示的延遲感，同時通過移除JS/CSS檔案案中空白、批註及修改JavaScript內建函式、變數名稱的壓縮手法，能有效縮小檔案案體積，提高傳輸效率，提供使用者更流暢的瀏覽體驗。

在ASP.NET MVC 4中可以使用BundleTable捆綁多個css檔案和js檔案，以提高網路載入速度和頁面解析速度。更為重要的是通過捆綁可以解決IE瀏覽器的31個CSS檔案串連的限制。在做ASP.Net項目時很多時候會使用一些開源的javascript控制項。無形中增加了css和javascript檔案的引用。如果手工將這些css檔案合并將給將來版本升級造成很大的麻煩。於是，我們只好小心翼翼的處理這些css檔案在頁面中的引用。ASP.NET捆綁是ASP.NET 4.5的新功能，是System.Web.Optimization命名空間下。他提供了一些ASP.NET運行效能方面的最佳化，比如，一個頁面可能有很多CSS/JS/圖片,通過靈活的應用BundleTable類，他可以幫你將檔案合并壓縮代碼最佳化成一個最理想的檔案，然後輸出到用戶端，從而提高了瀏覽器下載速度。

現在我們終於有一個以相對比較完美的解決方案來解決css檔案和javascirpt檔案給我們帶來的麻煩，BundleTable捆綁技術很好的解決了這個問題。

在ASP.NET MVC 4 Beta時代便已內建打包壓縮功能，做法是在global.asax.cs的Application_Start加入

BundleTable.Bundles.EnableDefaultBundles();

如此，便可使用以下寫法一口氣將整個Scripts目錄下的JS及Contents目錄下所有CSS打包並壓縮成單一檔案案，改善網頁載入效率: (參考)

最近在看ASP.NET MVC 4 RC，發現RC版在打包壓縮做法上又有所革新，變得更加彈性有條理。

原本打包規則被藏在global.asax.cs Application_Start中，RC版起則多了一個新目錄App_Start，其中包含RouteConfig.cs、FilterConfig.cs、BundleConfig.cs三個類，做法上改為通過WebActivator啟動。新的系統配置將路由規則、過濾器及打包規則等註冊邏輯由Application_Start中拆出來，各自放在獨立檔案案中，管理及修改起來一目瞭然，架構上更漂亮。

BundleConfig.cs的預設內容如下:

using System.Web;

using System.Web.Optimization;

namespace MyMvcApplicaiton

{

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

"~/Content/themes/base/jquery.ui.core.css",

"~/Content/themes/base/jquery.ui.resizable.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.button.css",

"~/Content/themes/base/jquery.ui.dialog.css",

"~/Content/themes/base/jquery.ui.slider.css",

"~/Content/themes/base/jquery.ui.tabs.css",

"~/Content/themes/base/jquery.ui.datepicker.css",

"~/Content/themes/base/jquery.ui.progressbar.css",

"~/Content/themes/base/jquery.ui.theme.css"));

}

跟Beta時代很大的差異是將JS與CSS加以群組化，分別定義出jquery, jqueryui, jqueryval, modernizr, css及themes/base/css等群組，讓網頁可以視需要只載入必要的JS及CSS檔案群組，不像先前每次得打包整個目錄，對於JS檔案的載入順序及相依性也能做較精準的調控。

而在.cshtml中，則使用Styles.Render及Scripts.Render載入BundleConfig.cs所定義的JS及CSS群組，例如:

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

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

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui",

"~/bundles/jqueryval")

@RenderSection("scripts", required: false)

</head>

<body>

@RenderBody()

</body>

</html>

接著來實測一下，做一個簡單的Index.cshtml，中間只有<div>Hello</div>一行，配合上述的_Layout.cshtml，進行測試，沒想到呈現的原始碼如下，一個個CSS及JS檔案都是分開的，沒打包也沒壓縮?

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>Hello</div>

</body>

</html>

原來，這也是ScriptBundle及StyleBundle的貼心之處，在偵錯模式下，會展現CSS及JS原貌，方便開發人員檢查原始碼找問題與除錯。要見識它的打包壓縮效果，記得要設定<compilation debug="false" targetFramework="4.0" />。

關閉偵錯模式後，網頁的原始碼就變成以下的樣子，一個群組只有一個<link>或<script>，而href及src會指向/Content/css?v=ji3nXsakWko…(包含雜湊碼參數，以確保檔案案變動時只會載入新版)格式的連結，傳回多個檔案案打包及壓縮後的內容:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>Hello</div>

</body>

</html>

最後，實際測量二者的效能差別:

在未打包壓縮前，載入網頁需要發出20個請求，總共傳輸5,992+812,541=818,533 Bytes的資料。

打包壓縮後，請求數下降到7個，資料轉送量也減少為2,274+352,454=354,728 Bytes，資料轉送量只有原本的43.33%!

在開發ASP.NET MVC 4項目時，不要忘記這個有用的機制。

最後介紹一個System.Web.Optimization的擴充庫 http://bundletransformer.codeplex.com/，推薦在ASP.NET MVC 4項目中使用。

http://www.codeproject.com/Articles/395143/JavascriptHelper-Managing-JS-files-for-ASP-NET-MVC

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More