壓縮 CSS

德米安倫蘇利
Demián Renzulli
Twitter GitHub Glitch

CSS 檔案可以包含不必要的字元，例如註解、空白字元和縮排。 在實際工作環境中，您可以安全地移除這些字元，藉此縮減檔案大小，同時不影響瀏覽器處理樣式。這種技術稱為「縮減」。

正在載入未指派的 CSS

請參閱下列 CSS 區塊：

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

這些內容易於閱讀，卻造成超過必要檔案的可能性：

  • 註解會使用空格來縮排，並且包含瀏覽器忽略的註解，以便將註解移除。
  • <h1> 和 <h2> 元素的樣式相同：不用個別宣告，而是以「h1, h2{...}」表示「h1 {...} h2 {...}」。
  • background-color、#000000 可以僅表示 #000。

完成這些變更後，您會取得更精簡的相同樣式版本：

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

您或許不想編寫這類 CSS。您可以改為照常編寫 CSS，並在建構程序中加入壓縮步驟。本指南將說明如何使用熱門的建構工具：webpack。

測量

安裝 CSS 壓縮功能適用於其他指南已使用過的網站：Fav Kitties。這個版本的網站使用很酷的 CSS 程式庫：animate.css，以便在使用者投票給貓 😺?。

首先，您需要瞭解壓縮這個檔案後能帶來哪些商機：

  1. 開啟測量頁面。
  2. 輸入網址：https://fav-kitties-animated.glitch.me，然後按一下「執行稽核」。
  3. 按一下「查看報表」。
  4. 按一下「成效」，然後前往「商機」部分。

產生的報表顯示，可從 animate.css 檔案儲存多達 16 KB：

Lighthouse：挖掘 CSS 商機。

現在檢查 CSS 的內容：

  1. 在 Chrome 中開啟 Fav Kitties 網站。(Glitch 伺服器可能需要一段時間才會首次回應)。
  2. 按下「Control + Shift + J」(在 Mac 上為 `Command + Option + J 鍵) 即可開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 按一下「CSS」篩選器。
  5. 勾選「停用快取」核取方塊。
  6. 重新載入應用程式。

開發人員工具 CSS 未最佳化追蹤記錄

網頁要求兩個 CSS 檔案，分別為 1.9KB 和 76.2KB。

  1. 按一下「animate.css」animate.css。
  2. 按一下「Response」分頁標籤即可查看檔案內容。

請注意，樣式表包含空格及縮排的字元：

開發人員工具 CSS 未最佳化回應

接下來，您要在建構程序中新增一些 Webpack 外掛程式，以壓縮這些檔案。

使用 Webpack 執行 CSS 壓縮

在採取行動之前，請花一些時間瞭解家庭親子內容網站的建構程序：

根據預設，webpack 產生的 JS 組合將包含內嵌 CSS 檔案的內容。由於我們想要分別維護 CSS 檔案，因此我們將使用兩個相輔相成的外掛程式：

  • mini-css-extract-plugin 會將每個樣式表擷取到各自的檔案中，作為建構程序的步驟之一。
  • 使用 webpack-fix-style-only-entries 來修正修正 4 中的問題，避免為 webpack-config.js 中列出的每個 CSS 檔案產生額外的 JS 檔案。

您現在將在專案中進行變更：

  1. 開啟 Glitch 中的 Fav Kitties 專案。
  2. 如要查看來源，請按一下「查看來源」。
  3. 按一下「Remix to Edit」(重混以編輯)，讓專案進入可編輯狀態。
  4. 按一下終端機 (注意：如果畫面上未顯示「終端機」按鈕，則您可能需要使用「全螢幕」選項)。

如要壓縮產生的 CSS，請使用 optimize-css-assets-webpack-plugin：

  1. 在 Glitch 控制台中，執行 npm install --save-dev optimize-css-assets-webpack-plugin。
  2. 執行 refresh，讓變更與 Glitch 編輯器同步處理。

接著，返回 Glitch 編輯器，開啟 webpack.config.js 檔案，然後進行下列修改：

載入檔案開頭的模組：js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

接著，將外掛程式的執行個體傳送至 plugins 陣列： js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] 進行變更後，將會觸發重新建構專案。產生的 webpack.config.js 看起來會像這樣：

接下來，您將使用成效工具查看這項最佳化結果。

驗證

  • 如要預覽網站，請按下「View App」(查看應用程式)，然後按下「Fullscreen」(全螢幕) 全螢幕。

如果您在上一個步驟中遺失了任何問題，可以按一下這裡開啟最佳化的網站版本。

如何檢查檔案大小和內容：

  1. 按下「Control + Shift + J」(在 Mac 上為 `Command + Option + J 鍵) 即可開啟開發人員工具。
  2. 按一下 [網路] 分頁標籤。
  3. 按一下「CSS」篩選器。
  4. 勾選「停用快取」核取方塊。
  5. 重新載入應用程式。

開發人員工具 CSS 未最佳化回應

您可以檢查這些檔案，看看新版本未包含任何空白字元。兩個檔案都縮小，特別是 animate.css 減少了 ~26%，省下 ~20 KB！

最後一步是：

  1. 開啟測量頁面。
  2. 輸入最佳化網站的網址。
  3. 按一下「查看報表」。
  4. 按一下「成效」，然後找出「商機」部分。

這份報表不再將「Minify CSS」顯示為「商機」，而是移至「通過的稽核」部分：

Lighthouse 已通過最佳化頁面的稽核。

由於 CSS 檔案是禁止轉譯資源，如果您在使用大型 CSS 檔案的網站上套用壓縮設定，就能看到「首次顯示內容所需時間」等指標改善項目。

後續步驟與相關資源

在本指南中，我們已透過 webpack 說明 CSS 壓縮功能，但同樣的方法也適用於其他建構工具，例如適用於 Gulp 的 gulp-clean-css，或 Grunt 的 grunt-contrib-cssmin。

此外，壓縮功能也可以套用到其他類型的檔案。請參閱壓縮及壓縮網路酬載指南，進一步瞭解壓縮 JS 的工具和壓縮等輔助技術。