捆綁和縮小是兩種方法可用于在 ASP.NET 4.5 改進請求加載時間。捆綁和縮小提高加載時間減少到服務器的請求數和減小大小的要求資產 （如 CSS 和 JavaScript。）

當前主流瀏覽器的大多數限制的每個主機名到六每個并發連接數。這意味著雖然正在處理六個請求，將由瀏覽器排隊資產在主機上的其他請求。在下面的圖像中，IE F12 開發人員工具網絡選項卡顯示資產由關于視圖的一個示例應用程序所需的時間。

灰色條顯示該請求排隊等待的六個連接限制，瀏覽器的時間。黃色欄是請求到第一個字節的時間就是發送請求和接收來自服務器的第一反應所需的時間。藍色條形顯示從服務器接收的響應數據所需的時間。您可以雙擊資產以獲得詳細的計時信息。例如，下面的圖像顯示加載/Scripts/MyScripts/JavaScript6.js文件的計時詳細信息。

前面的圖像顯示的啟動的事件，使時間要求被排隊因為瀏覽器的限制同時連接的數量。在這種情況下，請求被排隊等待另一個請求完成 46 毫秒為單位）。

捆綁銷售

捆綁銷售是 ASP.NET 4.5 使它容易地合并，或將多個文件捆綁到單個文件中的新功能。您可以創建 CSS、 JavaScript 和其他包。較少的文件意味著更少的 HTTP 請求和，可以改善第一頁負載性能。

下面的圖像顯示顯示以前，但這次與捆綁和縮小啟用的關于視圖的同一時間視圖。

縮小

縮小執行各種不同的代碼優化和腳本或 css，如刪除不必要的空白和注釋和縮短到一個字符的變量名。考慮下面的 JavaScript 函數。

AddAltToImg = function (imageTagAndImageID, imageContext) {///<signature>///<summary> Adds an alt tab to the image// </summary>//<param name="imgElement" type="String">The image selector.</param>//<param name="ContextForImage" type="String">The image context.</param>///</signature>var imageElement = $(imageTagAndImageID, imageContext);imageElement.attr('alt', imageElement.attr('id').replace(/ID/, '')); }

后縮小，功能被減少到以下內容：

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

除了刪除的評論和多余的空格，下面的參數和變量名被重命名 (縮短)，如下所示：

源語言	重命名
imageTagAndImageID	n
imageContext	t
imageElement	i

捆綁的影響和縮小

下表顯示了幾個重要的區別，分別列出所有資產和使用中的示例程序的捆綁和縮小 (B/M) 之間。

?	使用 B/M	沒有 B/M	變化
文件請求	9	34	256%
發送的 KB	3.26	11.92	266%
收到 KB	388.51	530	36%
加載時間	510 MS	780 MS	53%

發送的字節數有顯著減少與捆綁瀏覽器相當詳細與它們適用的請求的 HTTP 標頭。接收字節數減少不是一樣大的因為最大的文件 （Scripts\jquery-ui-1.8.11.min.js和Scripts\jquery-1.7.1.min.js） 都已經模糊不清。注意： 在示例程序上的計時使用提琴手工具來模擬較慢的網絡。（從提琴手規則菜單中，選擇性能然后模擬調制解調器速度.)

調試捆綁和縮減 JavaScript

很容易調試您在開發環境中的 JavaScript （在編譯元素?在Web.config文件設置為debug="true"?) 因為 JavaScript 文件不是捆綁在一起或模糊不清。你也可以調試發布版本哪里您 JavaScript 文件捆綁在一起，并且模糊不清。您使用 IE F12 開發人員工具，調試使用以下方法最包中包含的 JavaScript 函數：

選擇腳本選項卡，然后選擇啟動調試按鈕。

選擇包含您想要使用的資產按鈕進行調試的 JavaScript 函數的捆綁。

通過選擇配置按鈕設置最的 JavaScript 的格式然后選擇格式 JavaScript.

在搜索以股代息t 輸入框中，選擇您想要調試的函數的名稱。在下面的圖像中，搜索以股代息t 輸入框中輸入了AddAltToImg?。

F12 開發人員工具調試的詳細信息，請參閱 MSDN 文章：使用 F12 開發人員工具調試 JavaScript 錯誤.

控制捆綁和縮小

啟用或禁用通過在編譯元素中設置的調試屬性的值綁定和縮小?的Web.config文件中。在下面的 XML，debug?設置為 true，那么將捆綁和縮小處于禁用狀態。

<system.web><compilation debug="true" /><!-- Lines removed for clarity. --> </system.web>

要啟用捆綁和縮小，設置為"false"的debug?值。您可以重寫Web.config設置與BundleTable?類的EnableOptimizations?屬性。下面的代碼可以捆綁和縮小和重寫的Web.config文件中的任何設置。

public static void RegisterBundles(BundleCollection bundles) {bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));// Code removed for clarity. BundleTable.EnableOptimizations = true; } 注： 除非EnableOptimizations?是true?或編譯元素中的調試屬性?在Web.config文件設置為false，將不捆綁或文件模糊不清。此外，將不使用的文件的.min 版本，將選擇的完整的調試版本。EnableOptimizations?重寫匯編元素中的調試屬性?的Web.config文件中

使用捆綁和縮小與 ASP.NET Web 窗體和 Web 頁

• Web 頁，請參閱博客條目添加到 Web 頁站點的網站優化.
• 有關 Web 窗體，請參閱博客添加捆綁和縮小到 Web 窗體.

使用捆綁與 ASP.NET MVC 放縮法

在這一節我們將創建 ASP.NET MVC 項目，審查捆綁和縮小。首先，創建一個新的 ASP.NET MVC 互聯網項目，命名為MvcBM?，而無需更改任何默認設置。

打開App_Start\BundleConfig.cs文件并檢查的?RegisterBundles?方法，用于創建、 注冊和配置包。下面的代碼演示RegisterBundles?方法的部分。

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

上面的代碼中創建名為~/bundles/jquery?，其中包括所有適當的新 JavaScript 束 （這是調試或模糊不清但不是。vsdoc） 在腳本文件夾中的文件相匹配的通配符字符串"~/Scripts/jquery-{版本}.js"。對于 ASP.NET MVC 4，這意味著調試配置中，文件jquery 1.7.1.js將被添加到包。在發布配置，?jquery 1.7.1.min.js將被添加。捆綁框架如以下幾個共同的約定：

• 時存在"FileX.min.js"和"FileX.js"，請選擇".min"版本文件中。
• 選擇用于調試的非".min"版本。
• 忽略"-vsdoc"僅使用智能感知的文件 （如 jquery-1.7.1-vsdoc.js）。

如上所示的{version}通配符匹配用于自動創建一個 jQuery 束具有適當版本的 jQuery腳本文件夾中。在此示例中，使用通配符提供了以下好處：

• 允許您使用 NuGet 更新到新的 jQuery 版本而無需更改前面的綁定代碼或 jQuery 引用在您查看網頁。
• 自動選擇完整版，為調試配置和發布的".min"版本生成。

使用 CDN

遵循代碼替換 CDN jQuery 捆綁為本地 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 CDNvar 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. }

在上面的代碼中，jQuery 將請求從 CDN 雖然在釋放模式和 jQuery 的調試版本將被回遷本地在調試模式下。當使用 CDN，你應該有一個回退機制在 CDN 請求失敗的情況下。下面的標記片段從布局文件的末尾顯示腳本添加請求 jQuery 應 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>

創建包

包類Include?方法需要的字符串數組，其中每個字符串是資源的虛擬路徑。下面的代碼從App_Start\BundleConfig.cs文件的 RegisterBundles 方法顯示出多個文件添加到包：

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

提供包類IncludeDirectory?方法，以添加一個目錄中的所有文件 （和 （可選） 與搜索模式匹配的所有子目錄）。包類IncludeDirectory?API 如下所示：

public Bundle IncludeDirectory(string directoryVirtualPath, // The Virtual Path for the directory.string searchPattern) // The search pattern.public Bundle IncludeDirectory(string directoryVirtualPath, // The Virtual Path for the directory.string searchPattern, // The search pattern.bool searchSubdirectories) // true to search subdirectories.

在視圖中使用 Render 方法中，（對 CSS?Styles.Render?) 和Scripts.Render的 JavaScript 來引用的捆綁包。從Views\Shared\_Layout.cshtml文件下面的標記顯示默認 ASP.NET 互聯網項目視圖如何引用 CSS 和 JavaScript 的捆綁包。

<!DOCTYPE html> <html lang="en"> <head>@* Markup removed for clarity.*@ @Styles.Render("~/Content/themes/base/css", "~/Content/css")@Scripts.Render("~/bundles/modernizr") </head> <body>@* Markup removed for clarity.*@@Scripts.Render("~/bundles/jquery")@RenderSection("scripts", required: false) </body> </html>

請注意渲染方法采用字符串數組，因此您可以在一行代碼中添加多個軟件包。你一般會想要使用所創建的必要的 HTML 來引用該資產的渲染方法。您可以使用?Url?方法生成的 URL，該資產，而引用該資產所需的標記。假設你想要使用新的 HTML5?async屬性。下面的代碼演示如何引用 modernizr 使用Url?的方法。

<head>@*Markup removed for clarity*@<meta charset="utf-8" /><title>@ViewBag.Title - MVC 4 B/M</title><link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /><meta name="viewport" content="width=device-width" />@Styles.Render("~/Content/css")@* @Scripts.Render("~/bundles/modernizr")*@<script src='@Scripts.Url("~/bundles/modernizr")' async> </script> </head>

使用"*"通配符字符，請選擇文件

Include?方法和IncludeDirectory?方法中的搜索模式中指定的虛擬路徑可以接受一個"*"通配符字符作為前綴或后綴來中最后一個路徑段。搜索字符串是區分大小寫。IncludeDirectory?方法有選擇搜索子目錄。

與下面的 JavaScript 文件考慮一個項目：

• Scripts\Common\AddAltToImg.js
• Scripts\Common\ToggleDiv.js
• Scripts\Common\ToggleImg.js
• Scripts\Common\Sub1\ToggleLinks.js

下表顯示的文件添加到捆綁使用通配符，如圖所示：

電話	添加文件或引發異常
Include("~/Scripts/Common/*.js")	AddAltToImg.js，ToggleDiv.js，ToggleImg.js
Include("~/Scripts/Common/T*.js")	無效的模式的異常。通配符字符只允許對的前綴或后綴。
Include("~/Scripts/Common/*og.*")	無效的模式的異常。只有一個通配符字符被允許。
"Include("~/Scripts/Common/T*")	ToggleDiv.js ToggleImg.js
"Include("~/Scripts/Common/*")	無效的模式的異常。一個純通配符段不是有效的。
IncludeDirectory ("~/Scripts/Common"，"T *"）	ToggleDiv.js ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*",true)	ToggleDiv.js，ToggleImg.js，ToggleLinks.js

顯式地將每個文件添加到一捆是一般首選在通配符加載的文件，原因如下：

• 將腳本由通配符默認值添加到加載它們按字母順序，通常不是你想。經常需要 (非字母） 按照特定的順序添加 CSS 和 JavaScript 文件。通過添加一個自定義的IBundleOrderer實現，但顯式添加每個文件都少出錯，可以降低這種風險。例如，您可能會添加新的資產到文件夾在將來可能會要求您修改您的IBundleOrderer實現。
• 查看特定文件添加到使用通配符加載目錄可以包含在引用該捆綁包的所有視圖。如果查看特定腳本添加到包中，你可能會引用捆綁其他視圖上一個 JavaScript 錯誤。
• 將其他文件導入的 CSS 文件導致兩次加載導入的文件。例如，下面的代碼創建一個束與大多數的 jQuery UI 的主題 CSS 文件加載兩次。 bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll").IncludeDirectory("~/Content/themes/base", "*.css")); 在每個 CSS 文件夾中的文件，包括Content\themes\base\jquery.ui.all.css文件帶來的通配符"*.css"選擇器。Jquery.ui.all.css文件中導入其他 CSS 文件。

捆綁緩存

捆綁組 HTTP Expires 標題從捆綁在創建時的一年。如果您導航到以前查看過的頁面，提琴手顯示 IE 不會捆綁包，有條件的請求就是有 IE 捆綁，沒有 HTTP GET 請求，并沒有來自服務器的 HTTP 304 響應。您可以強制 IE，使每個包的條件請求使用 F5 鍵 （導致每個包的 HTTP 304 響應）。您可以通過使用強制完全刷新 ^ F5 （導致每個包的 HTTP 200 響應）。

下圖顯示了緩存選項卡的提琴手響應窗格中：

請求
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
用于AllMyScripts捆綁并包含一個查詢字符串對v = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81。查詢字符串v有一個令牌就是一個唯一的標識符，用于緩存的值。只要該捆綁不發生變化，ASP.NET 應用程序會要求使用此令牌的AllMyScripts捆綁。如果在包中的任何文件發生更改，ASP.NET 優化框架將生成新的令牌，保證瀏覽器請求捆綁包將得到最新捆綁。

如果您運行的 IE9 F12 開發人員工具，并導航到以前加載的頁面，IE 不正確地顯示每個包和服務器返回 HTTP 304 作出的有條件 GET 請求。您可以閱讀為什么 IE9 已確定如果使用 Cdn 和改進 Web 站點的性能對過期的博客條目中做了一個有條件的請求的問題.

較少，CoffeeScript、 SCSS，敢褻瀆捆綁銷售。

捆綁和縮小框架提供一種機制來處理中間語言如SCSS、上海社會科學院、較少或Coffeescript，并適用于產生捆綁的轉換，如縮小。例如，要將.less文件添加到您的 MVC 4 項目：

創建一個文件夾為您較少的內容。下面的示例使用Content\MyLess文件夾。

添加.less?NuGet 包拉丁文到您的項目。

添加一個類實現IBundleTransform接口。.Less 變換，將下面的代碼添加到項目中。 using System.Web.Optimization;public class LessTransform : IBundleTransform {public void Process(BundleContext context, BundleResponse response){response.Content = dotless.Core.Less.Parse(response.Content);response.ContentType = "text/css";} }

創建與LessTransform?和CssMinify變換較少的文件包。將下面的代碼添加到App_Start\BundleConfig.cs文件中的RegisterBundles?方法。 var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less"); lessBundle.Transforms.Add(new LessTransform()); lessBundle.Transforms.Add(new CssMinify()); bundles.Add(lessBundle);

將下面的代碼添加到引用的少捆綁的任何視圖。 @Styles.Render("~/My/Less");

捆綁軟件注意事項

創建包時遵循良好公約 》 是包括"捆綁"作為軟件包名稱中的前綴。這將防止路由沖突的可能.

一旦您更新包中的一個文件，為捆綁查詢字符串參數生成一個新的令牌和充分的捆綁必須下載一個客戶端請求的頁面包含包的下一次。在傳統標記中的每個資產所單獨列，僅更改后的文件將被下載。頻繁更改的資產捆綁可能不到很好的候選。

捆綁和縮小主要改善的第一頁請求加載時間。一旦請求了一個網頁，瀏覽器會緩存 （JavaScript、 CSS 和圖像） 的資產所以捆綁和縮小在請求同一頁面時，不會提供任何性能提升或頁面上相同站點請求同一資產。如果不設置過期標頭正確地對您的資產，您不使用捆綁和縮小，瀏覽器新鮮度試探法將標志著資產陳舊幾天后和瀏覽器的每個資產的需要驗證請求。在這種情況下，捆綁和縮小后的第一個頁面請求提供性能提高。有關詳細信息，請參閱博客使用 Cdn 和過期的改進 Web 站點的性能.

通過使用CDN可以降低瀏覽器限制的每個主機名每六個同時連接。因為 CDN 將比您承載的網站有一個不同的主機名，從 CDN 資產請求不會計算針對六個同時連接數限制到您的宿主環境。CDN 也可以提供共同包緩存和緩存優勢的邊緣。

束應由頁需要它們進行分區。例如，默認的 internet 應用程序的 ASP.NET MVC 模板創建 jQuery 驗證包單獨從 jQuery。因為創建的默認視圖有沒有輸入，并且不發布值，它們不包含驗證包。

System.Web.Optimization命名空間是在 System.Web.Optimization.DLL 中實現的。它利用了 WebGrease 庫 (WebGrease.dll) 對于縮小功能，它反過來使用 Antlr3.Runtime.dll。

總結

以上是生活随笔為你收集整理的捆绑和缩小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。