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,以便在使用者投票給貓 😺?。
首先,您需要瞭解壓縮這個檔案後能帶來哪些商機:
- 開啟測量頁面。
- 輸入網址:
https://fav-kitties-animated.glitch.me
,然後按一下「執行稽核」。 - 按一下「查看報表」。
- 按一下「成效」,然後前往「商機」部分。
產生的報表顯示,可從 animate.css 檔案儲存多達 16 KB:
現在檢查 CSS 的內容:
- 在 Chrome 中開啟 Fav Kitties 網站。(Glitch 伺服器可能需要一段時間才會首次回應)。
- 按下「Control + Shift + J」(在 Mac 上為 `Command + Option + J 鍵) 即可開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 按一下「CSS」篩選器。
- 勾選「停用快取」核取方塊。
- 重新載入應用程式。
網頁要求兩個 CSS 檔案,分別為 1.9KB 和 76.2KB。
- 按一下「animate.css」animate.css。
- 按一下「Response」分頁標籤即可查看檔案內容。
請注意,樣式表包含空格及縮排的字元:
接下來,您要在建構程序中新增一些 Webpack 外掛程式,以壓縮這些檔案。
使用 Webpack 執行 CSS 壓縮
在採取行動之前,請花一些時間瞭解家庭親子內容網站的建構程序:
根據預設,webpack 產生的 JS 組合將包含內嵌 CSS 檔案的內容。由於我們想要分別維護 CSS 檔案,因此我們將使用兩個相輔相成的外掛程式:
- mini-css-extract-plugin 會將每個樣式表擷取到各自的檔案中,作為建構程序的步驟之一。
- 使用 webpack-fix-style-only-entries 來修正修正 4 中的問題,避免為 webpack-config.js 中列出的每個 CSS 檔案產生額外的 JS 檔案。
您現在將在專案中進行變更:
- 開啟 Glitch 中的 Fav Kitties 專案。
- 如要查看來源,請按一下「查看來源」。
- 按一下「Remix to Edit」(重混以編輯),讓專案進入可編輯狀態。
- 按一下終端機 (注意:如果畫面上未顯示「終端機」按鈕,則您可能需要使用「全螢幕」選項)。
如要壓縮產生的 CSS,請使用 optimize-css-assets-webpack-plugin:
- 在 Glitch 控制台中,執行
npm install --save-dev optimize-css-assets-webpack-plugin
。 - 執行
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」(全螢幕) 。
如果您在上一個步驟中遺失了任何問題,可以按一下這裡開啟最佳化的網站版本。
如何檢查檔案大小和內容:
- 按下「Control + Shift + J」(在 Mac 上為 `Command + Option + J 鍵) 即可開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 按一下「CSS」篩選器。
- 勾選「停用快取」核取方塊。
- 重新載入應用程式。
您可以檢查這些檔案,看看新版本未包含任何空白字元。兩個檔案都縮小,特別是 animate.css 減少了 ~26%,省下 ~20 KB!
最後一步是:
- 開啟測量頁面。
- 輸入最佳化網站的網址。
- 按一下「查看報表」。
- 按一下「成效」,然後找出「商機」部分。
這份報表不再將「Minify CSS」顯示為「商機」,而是移至「通過的稽核」部分:
由於 CSS 檔案是禁止轉譯資源,如果您在使用大型 CSS 檔案的網站上套用壓縮設定,就能看到「首次顯示內容所需時間」等指標改善項目。
後續步驟與相關資源
在本指南中,我們已透過 webpack 說明 CSS 壓縮功能,但同樣的方法也適用於其他建構工具,例如適用於 Gulp 的 gulp-clean-css,或 Grunt 的 grunt-contrib-cssmin。
此外,壓縮功能也可以套用到其他類型的檔案。請參閱壓縮及壓縮網路酬載指南,進一步瞭解壓縮 JS 的工具和壓縮等輔助技術。