發行項
08/13/2015

本文章是由機器翻譯。

技術最前線

程式設計 CSS：組合與削減

Web 開發老特拉說太多的要求會影響頁的性能。如果你知道竅門，減少 HTTP 要求觸發的 Web 頁，然後通過各種手段的數量，應用它。作為 Web 頁獲得充滿了更豐富的視覺內容，下載 CSS、腳本和圖像等相關的資源的成本會大幅度增加。當然，大多數情況下，這些資源可能被本機快取，瀏覽器，但初始足跡可能很難維持。此外，較少和規模較小的請求説明保持較低的頻寬、降低延遲和延長電池壽命。這些都是在移動流覽的關鍵因素。被廣泛接受的方法來解決這些問題包括兩個操作的組合：捆綁和縮小。

在這篇文章，我會掩護捆綁和縮小的 CSS 檔從獨特的視角在ASP.NETMVC 4 中可用的軟體工具。在此之前，我以前的專欄，"ASP.NETMVC 4，第2 部分中創建優化的移動視圖：使用 WURFL"(msdn.microsoft.com/magazine/dn342866)。

捆綁的基礎知識和縮小

捆綁銷售是軋了許多不同的資源一起成單個可下載資源的過程。例如，包可能包括多個 JavaScript 或 CSS 檔你帶到本地機器通過一個 HTTP 要求向特設的終結點。縮小，另一方面，是應用到資源轉變。尤其是，縮小是刪除所有不必要的字元，從基於文本的資源也不能改變預期的功能的方式。這意味著縮短識別碼，消除鋸齒功能，並移除注釋、空白字元和新線 — — 一般情況下，通常增加可讀性不過花的所有字元空間並不真的任何目的功能。

捆綁和縮小可以在一起應用，但仍然是獨立的進程。根據需要，您可以決定只創建包或壓縮單個檔。通常，然而，對生產網站有是沒有理由不捆綁和如下：所有的 CSS 和 JavaScript 檔 — — 除了也許共同的資源例如 jQuery 很可能為知名內容傳遞網路 (Cdn) 上。不過，在調試時，它是一個完全不同的故事：最或捆綁的資源是相當難以閱讀和單一步驟，因此您可能不想捆綁和啟用的縮小。

許多框架捆綁和縮小與提供服務稍有不同級別的可擴充性和不同的功能集。大多數情況下，它們都提供相同的功能，所以接過來，另一是純粹的首選項。如果你在寫一個ASP.NETMVC 4 應用程式，MicrosoftASP.NETWeb 優化框架，可通過 NuGet 包是捆綁和縮小的天然選擇 (bit.ly/1bS8u4B) 和所示 圖 1。

圖 1 安裝 MicrosoftASP.NETWeb 優化框架

使用 CSS 捆綁銷售

我看到的東西，瞭解 CSS 捆綁的力學的最佳方法是從一個真正空的ASP.NETMVC 專案啟動。這意味著創建新的專案使用的空專案範本和刪除未使用的引用和檔。下一步，你說你添加一個佈局檔，連結幾個 CSS 檔：

<link rel="stylesheet"
  href="@Url.Content("~/content/styles/site.css")"/>

如果您顯示的頁面，並監視其網路活動與提琴手或互聯網瀏覽器開發人員工具，您會看到兩個下載那個走在並行。此為預設行為。

請注意，在ASP.NETMVC 4 你就可以改寫前面標記中使用新的 Styles.Render 設施遠更緊湊的方式：

@Styles.Render(
  "~/content/styles/site.css",
  "~/content/styles/site.more.css")

樣式類是位於下 System.Web.Optimization，比第一次看上去遠更強大。 Styles.Render 方法還支援捆綁包。這意味著該方法具有的各式各樣的重載，這些重載其中之一接受陣列的 CSS Url。另一個重載，不過，採用以前創建的包（更多關於這不久）的名稱。在這種情況下，它會發出一個單一 < 連結 > 元素，並使它指向作為捆綁或最返回所有的樣式表的自動生成的 URL。

創建 CSS 捆綁

通常情況下，您在 global.asax 中以程式設計方式創建了捆綁。根據配置代碼的ASP.NETMVC 4 模式，你可能想要創建的 App_Start 資料夾下的 BundleConfig 類和暴露出它的靜態初始化方法：

BundleConfig.RegisterBundles(BundleTable.Bundles);

CSS 捆綁是簡單的樣式表的集合。這裡是您需要組合在單個的下載上述的兩個 CSS 檔的代碼：

public class BundleConfig
{
  public static void RegisterBundles(BundleCollection bundles)
  {
    // Register bundles first
    bundles.Add(new Bundle("~/mycss").Include(
      "~/content/styles/site.css",
      "~/content/styles/site.more.css"));
    BundleTable.EnableOptimizations = true;
  }
}

您創建一個新的包類，並通過建構函式將用於引用視圖或 Web 頁中的捆綁的虛擬路徑。您還可以設置稍後通過路徑屬性的虛擬路徑。要將 CSS 檔關聯與捆綁包，請使用 Include 方法。此方法採用一個陣列，這些字串表示的虛擬路徑。您可以指示顯式地在前面的示例的 CSS 檔，或您可以指明一個模式字串，如下所示：

bundles.Add(new Bundle("~/mycss")
  .Include("~/content/styles/*.css");

捆綁類也有一個 IncludeDirectory 方法，以便您可以指示給定的虛擬目錄，和可能一個模式匹配的字串和一個 Boolean 標誌，也使搜索子目錄的路徑。

你看到的 EnableOptimization 布林值屬性設置上捆綁在前面的程式碼片段中的表類是指需要顯式啟用捆綁銷售。如果不以程式設計方式啟用，只捆綁不起作用。如前所述，捆綁銷售是一種優化；形式為此，它主要是意義當網站的生產中。 EnableOptimization 屬性是一種簡便方法設置了捆綁銷售，它應該是在生產中，但該網站在偵錯模式下在編譯之前你應該禁用它。您甚至可能會用下面的代碼：

if (!DEBUG)
{
  BundleTable.EnableOptimizations = true;
}

更高級的捆綁功能

CSS 捆綁而言，沒有很多別的有關除縮小。然而，BundleCollection 類是一個通用類，可用於還捆綁的指令檔。特別是在 BundleCollection 類有幾個值得一提的即使他們通常都是非常有用的功能當指令檔 — — 而不是 CSS 檔 — — 捆綁在一起。

第一個特徵訂購。BundleCollection 類具有一個名為訂購人 IBundleOrderer 類型的屬性。可能看起來很明顯，訂購人是一個元件負責確定要在其中將被包供下載的檔的實際順序。預設訂購人是 DefaultBundleOrderer 類。此類捆綁檔從通過 FileSetOrderList 設置設置結果的順序 — — BundleCollection 的一個屬性。FileSetOrderList 被設計為一個 BundleFileSetOrdering 類的集合。每個類定義為檔案模式（例如，jquery-*），和類添加到 FileSetOrderList 中的 BundleFileSetOrdering 的順序確定檔的實際順序。例如，在預設配置下，所有的 jQuery 檔總是捆綁在 Modernizr 檔之前。

關於 CSS 檔的 DefaultBundleOrderer 類的影響是更多的限制。如果您有一個名為"reset.css"或在您的 Web 網站中的"normalize.css"檔，這些檔會自動捆綁在任何你的 CSS 檔之前, 和 reset.css 總是先于 normalize.css。對於那些不熟悉重置/正常化樣式表中，這種樣式表的目標是為所有的 HTML 元素提供一組標準的樣式屬性，因此，您的網頁不繼承瀏覽器特定設置，如字體、大小和頁邊距。雖然一些建議內容存在對於這兩種類型的 CSS 檔，但實際內容是由你。如果有檔與這些名稱在您的專案，然後ASP.NETMVC 4 使額外的努力，確保他們捆綁在其他東西之前。如果您想要重寫預設訂購人和忽略預定義的包檔設置序，你有兩個選項。第一，您可以創建您自己訂購在每個包的基礎工作的人。下面是一個示例，只是忽略預定義的排序：

public class PoorManOrderer : IBundleOrderer
{
  public IEnumerable<FileInfo> OrderFiles(
    BundleContext context, IEnumerable<FileInfo> files)
  {
     return files;
  }
}

你使用它就像這樣：

var bundle = new Bundle("~/mycss");
bundle.Orderer = new PoorManOrderer();

此外，您可以重置所有序使用以下代碼：

bundles.ResetAll();

在這種情況下，使用預設訂購人或窮人的訂購人前面顯示的效果是相同的。但是，請注意，ResetAll 還將腳本序重置。

第二，更多高級功能是忽略清單。它通過 BundleCollection 類的 IgnoreList 屬性定義，定義的檔，選擇以包含但應改為忽略模式匹配的字串。主要的好處捆綁在ASP.NETMVC 4 實施是你可以得到所有 JavaScript 檔 (*.js) 中的資料夾中的單個調用。然而，它的可能的 *.js 也匹配您不想下載，如 vsdoc.js 的檔的檔。 IgnoreList 的預設配置給你一個機會，可以自訂同時照顧最常見的情況。

CSS 捆綁在行動

CSS 捆綁銷售是一個功能強大的優化功能，但它在實踐中如何工作？請考慮下列程式碼：

var bundle = new Bundle("~/mycss");
bundle.Include("~/content/styles/*.css");           
bundles.Add(bundle);

中顯示了相應的 HTTP 通訊圖 2。

圖 2 第二個要求是與多個 CSS 檔捆綁

第一次請求是為主頁；第二個請求並不指向特定的 CSS 檔，但指的是包含在內容/樣式資料夾中的所有 CSS 檔捆綁（見圖 3)。

圖 3 的捆綁 CSS 示例

添加縮小

包類是只關注在一起包裝多個資源，所以他們被俘在單個的下載和緩存。

正如你看到的代碼中圖 3，雖然已下載的內容填充空格和分行符號為了提高可讀性。然而，瀏覽器不關注的瀏覽器中的 CSS 代碼的可讀性，與圖 3 完全等效于以下最代碼中的字串：

html,body{font-family:'segoe ui';font-size:1.5em;margin:10px}
  html,body{background-color:#111;color:#48d1cc}

簡單的 CSS 我正與在此示例中，為縮小可能不是什麼大不了。然而，最的 CSS 使有很多商務網站與大樣式表的意義。

你會如何添加縮小？它是用 StyleBundle 替換包類一樣簡單。 StyleBundle 是非常簡單的。它繼承從捆綁，並只包含不同的建構函式：

public StyleBundle(string virtualPath)
  : base(virtualPath, new IBundleTransform[] { new CssMinify() })
{
}

包類有一個建構函式接受的 IBundleTransform 物件的清單。這些轉換是應用的一個後下一步的內容。 StyleBundle 類只是添加 CssMinify 變壓器。 CssMinify 是預設 minifierASP.NETMVC 4 （和較新的版本），基於 WebGrease 優化工具 (webgrease.codeplex.com)。不用說，如果你想要切換到不同的 minifier，所有你需要做是獲取類 — — IBundleTransform 的實現 — — 並通過捆綁類的建構函式傳遞給它。

不要再找藉口

與ASP.NETMVC 4 捆綁在 Web 優化框架添加一點點的功能，但它的功能，有比更好不。有只是沒有理由不貼圖層和捆綁銷售資源。到目前為止，一個可能的藉口是缺乏ASP.NET平臺中的本機支援。這不再是ASP.NETMVC 4 和較新版本的情況。

CSS 檔而言，不過，有另一個方面來考慮：動態生成的樣式。設計為應用於頁僅僅是皮膚，CSS 正在變成一個更動態的資源已經介紹了一些偽程式設計語言來以程式設計方式生成 CSS 的點。我會會回來蓋只是下一次。

Dino Esposito 是"構建移動解決方案的企業"（微軟出版社，2012年）的作者和即將舉行"程式設計ASP.NETMVC 5"（Microsoft Press）。為.NET 和 Android 平臺在 JetBrains 和經常在世界各地的行業活動發表演講的技術傳教士，埃斯波西托共用的軟體，他的理想 software2cents.wordpress.com 和在 Twitter 上 twitter.com/despos。

衷心感谢以下技术专家对本文的审阅：克里斯多夫 · Bennage (Microsoft)
克里斯多夫 · Bennage 是開發商，在微軟的模式 & 實踐團隊。他的工作是發現、收集和鼓勵帶給開發者歡樂的做法。他最近的技術利益當中是 JavaScript 和 (休閒) 遊戲開發。在他博客 dev.bennage.com。

共用方式為