壓縮 CSS

Demián Renzulli
Demián Renzulli
X GitHub 毛刺

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，然後按一下「Run Audit」。
  3. 按一下「查看報表」。
  4. 按一下「成效」並前往「商機」部分。

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

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. 按一下「回應」分頁標籤，即可查看檔案內容。

請注意，樣式表包含空白字元和縮排字元：

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

接著，您會在建構程序中新增一些 webpack 外掛程式，以壓縮這些檔案。

使用 webpack 進行 CSS 壓縮

開始最佳化之前，請花點時間瞭解 Fav Kitties 網站的建立程序如何運作：

根據預設，Webpack 產生的 JS 組合會包含內嵌 CSS 檔案的內容。我們想要維護不同的 CSS 檔案，因此使用以下兩個互補的外掛程式：

  • mini-css-extract-plugin 會將每個樣式工作表擷取到各自的檔案中，做為建構程序的其中一個步驟。
  • webpack-fix-style-only-entries 可用於修正 Wepback 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 如下所示：

接下來，您將使用效能工具查看最佳化的結果。

驗證

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

如果我在前一個步驟中迷路了 這裡開啟一個最佳化器 每個版本的網站版本

如何查看檔案的大小和內容：

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

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

您可以檢查這些檔案，確認新版本中沒有任何空白字元。這兩個檔案都小很多，尤其是 animate.css 減少了 ~26%，節省 ~20KB！

最後一個步驟：

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

報表未顯示「壓縮 CSS」「商機」現已移至「通過的稽核」區段：

Lighthouse 通過稽核，適用於最佳化頁面。

由於 CSS 檔案屬於禁止轉譯資源，因此如果您在使用大型 CSS 檔案的網站上套用壓縮，First Contentful Paint 等指標就能有所提升。

後續步驟與相關資源

在本指南中，我們介紹了 Webpack 的 CSS 壓縮功能，但您也可以搭配其他建構工具 (例如 Gulp 的 gulp-clean-css) 或 grunt-contrib-cssmin 代表 Grunt。

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