ScottGu中文部落格: 新捆綁和縮小支援（ASP.NET 4.5系列）

新捆綁和縮小支援（ASP.NET 4.5系列）

By DevDivChina

[原文發表地址]  New Bundling and Minification Support (ASP.NET 4.5 Series)

[原文發表時間]  2011-11-27 20:58

這是我的ASP.NET 4.5系列中的第六篇博文。

下一個.NET和Visual Studio的發布包含很多新特性和功能。在ASP.NET 4.5中，你將會看到很多真的非常好的關於Web Form、MVC的改進，以及關於二者構建基礎的ASP.NET核心基礎的改進。

今天的博文涵蓋了我們在ASP.NET中為捆綁和縮小添加內建支援所做的一些工作，那些支援會便於提高應用程式的效能。這個功能可供所有的ASP.NET應用程式使用，包括ASP.NET MVC和ASP.NET Web Form解決方案。

捆綁和縮小的基礎知識

隨著越來越多的人使用行動裝置在web上衝浪，讓網站和構建的應用程式互相良好地配合變得越來越重要。我們已經嘗試過在智能手機上載入網址——只是最後放棄了，因為它在慢速的行動電話通訊網路上載入得很慢。如果您的網址/應用程式載入慢如那樣的話，你可能因為效能差會失去潛在的客戶。即使有強大的台式機，載入網址的時間和效能也對客戶有很大的影響。

如今大多數網站是由多個JavaScript 和 CSS檔案來獨立檔案和保持代碼緊湊。從編碼的角度來看，這是一個好的做法，然而它經常會給網站的整體效能帶來負面效果。多個JavaScript 和 CSS檔案需要多個從瀏覽器發出的HTTP請求，那樣反過來會降低效能。

簡單的樣本

下面，我在IE9中開啟了一個以磁碟為基礎的網站，並使用IE內建的F12 開發工具記錄了網路流量，如下所示，此網站包含瀏覽器必須載入的5個CSS和4個JavaScript檔案。目前每個檔案都由瀏覽器分別發送請求，並由伺服器返回結果，所需時間與檔案的數量成正比，所以毫無疑問這個過程會花費大量的時間。

捆綁

ASP.NET 正在添加新的功能，來輕鬆地“捆綁”或“合并”多個CSS和JavaScript 檔案到較少的HTTP請求中。這會讓瀏覽器請求較少的檔案，反過來就減少了擷取它們所需的時間。以下是上述例子更新過的版本，它充分利用了新的捆綁功能（為JavaScript和CSS都只做了一次請求）

 

現在瀏覽器只需向伺服器發送較少的請求。單個檔案的內容被捆綁/合并入相同的回應中，但是檔案內容保持不變。所以整個檔案的大小和捆綁前是完全相同的。但是請注意即使在本地開發機器上（瀏覽器和伺服器之間的網路延遲是最小的），此捆綁 CSS 和 JavaScript 檔案行為仍然可以減少20%的整體頁面載入時間。針對慢速網路的效能改進將會更明顯。

縮小

下一個ASP.NET的發布也添加了一些新的功能，以減少或“縮小”下載內容的大小。這是從CSS和JavaScript中刪除空白、注釋和其他不必要字元的過程。這樣會讓檔案變小，在瀏覽器中下載和載入時會更快。以表展示了使用捆綁和縮小時的效能改進：

 

即使在做我的本地開發機器上（其中網路延遲是最小的），我們現在也可以比當初啟動時提高40%的效能。在慢速網路上（尤其是擁有國際性的客戶），效能收益會更多。

在ASP.NET內部使用捆綁和縮小

即將發布的ASP.NET充分利用了項目內部的捆綁和縮小，可以看到像以上方案中的效能收益。它執行此操作的方法，可以無須在產生過程中運行自訂工具 — — ASP.NET添加了運行時支援來動態執行捆綁/縮小（緩衝結果以確定效能是良好的）。這成就了一個真正清潔的開發體驗，同時為使用這些新的功能提供了真正的便利。

假設我們有一個簡單的項目，項目包含4個JavaScript 檔案和6個CSS 檔案：

捆綁和縮小.css檔案

假設你想要引用上述“Styles” 檔案夾下的所有樣式表。現在你不得不添加多個CSS引用來擷取它們——這將轉化為6個單獨的HTTP請求：

新的捆綁/縮小功能允許你捆綁和縮小Styles檔案夾下所有的.CSS檔案——只需發送一個URL請求到檔案夾中（此例中為“styles”），並在它後面追加“/css” 路徑。例如：

這將會讓ASP.NET掃描目錄，並捆綁和縮小.css檔案，再返回一個包含了所有發送到瀏覽器的CSS 內容的HTTP響應。

您不必運行任何工具或前置處理器來做到這一點。這將讓您清晰地將CSS分離成單獨的邏輯.css檔案，保持一個非常清潔的開發體驗——同時在運行時沒有影響效能。同時Visual Studio設計器將設定新的捆綁/縮小邏輯——那樣你在VS內部也將仍然獲得一個WYSWIYG設計器體驗。

捆綁和縮小JavaScript 檔案

和上述CSS方法一樣，如果我們想要捆綁和縮小所有的JavaScript到單個的回應中，我們可以發送一個URL請求到檔案夾中（此例中為“scripts”），並在它後面追加“/js”路徑：

這將會讓ASP.NET掃描目錄，並捆綁和縮小.js檔案，再返回一個包含了所有發送到瀏覽器的JavaScript 內容的HTTP響應。再次——不需要自訂工具或產生步驟來做到這一點。它適用於所有的瀏覽器。

在捆綁中為檔案排序

預設情況下，當檔案通過ASP.NET捆綁時，它們將先以字母排序，正如它們在方案總管中顯示的一樣。然後它們被自動地前後移動，那樣像jQuery、MooTools 和 Dojo的已知庫和自訂擴充可以在其他檔案之前先載入。所以Scripts檔案夾的捆綁的預設排序如以下所示：

1. Jquery-1.6.2.js
2. Jquery-ui.js
3. Jquery.tools.js
4. a.js

預設情況下，CSS檔案也是通過字母排序的，然後前後移動，那樣reset.css 和 normalize.css（如果它們存在的話）可以在其他檔案之前先載入。所以Styles檔案夾的捆綁的預設排序如以下所示：

1. reset.css
2. content.css
3. forms.css
4. globals.css
5. menu.css
6. styles.css

不過，排序是完全可自訂的，並可以更改以適用大多數使用方式和任何你喜歡的常用命名模式。不過，框外體驗的目標是使用智能的預設排序。

支援任意數量的目錄/子目錄

在上述例子的應用程式中，我們只有單個的檔案夾——“Scripts” 和 “Styles”。這適用於某些應用程式類型 （例如單個頁面應用程式）。然而，在應用程式中，你經常需要多個CSS/JS捆綁——例如：一個“通用”捆綁，用來包括所有頁面使用的核心JS 和CSS檔案，然後是像特定頁面或特定部分這類不是全域使用的檔案。

你可以在項目中捆綁/縮小任意數量的目錄或子目錄——這將更容易構造代碼， 同時使捆綁/縮小收益最大化。預設情況下，每個目錄可以作為一個單獨的 URL 地址捆綁來訪問。

捆綁/縮小可擴充性

請記住：ASP.NET的捆綁和縮小支援具有可擴充性。而且過程中的每個部分都可以擴充或替換。

自訂規則

除了允許來自外部的基於目錄的捆綁方式之外，ASP.NET 也支援通過使用我們即將公開的新的編程用API，來註冊自訂捆綁。

以下代碼示範了在應用程式的Global.asax 類中，如何使用代碼來註冊一個“customscript”捆綁。API允許你在非常細化的層級上添加/刪除/篩選捆綁的檔案：

上面的自訂捆綁可以被應用程式中的任何地方引用。使用以下<script>引用：

自訂過程

你也可以覆蓋掉預設的CSS和JavaScript捆綁來支援你自己的捆綁檔案的自訂進程（例如：自訂縮小規則，支援Saas, LESS 或 Coffeescript 文法,等等).

在上面例子中，我們指出，我們想要用自訂的MyJsTransform 和 MyCssTransform 類替換內建的縮小轉換。它們分別歸屬於CSS 和 JavaScript 縮小器，並且可以添加額外的功能：

此可擴充性的最終結果是你可以在深層層級加入捆綁/縮小邏輯，並且可以做一些非常酷的事情。

實行捆綁和縮小的2分鐘視頻

Mads Kristensen 有一個很棒的90 秒視頻，它展示了如何使用新的捆綁/縮小功能。你可以點擊這兒觀看90秒視頻。

總結

ASP.NET的下一個發布中的新捆綁和縮小支援將更容易構建快速的web應用程式。它真的非常容易使用，而且不會對你現存的開發工作流程做很大的改變。它也支援豐富的可擴充性 API，來讓你自訂你所想要的。

在基於應用程式的ASP.NET MVC、ASP.NET Web Form 和 ASP.NET Web 頁面中，你可以輕鬆地利用這種新的支援。

希望這會對你有所協助

Scott

說明：除了部落格之外，我使用推特來快速發表博文以及分享連結。 我的推特是@scottgu

 

 

View this post online.