移除網站中用不到的 CSS 規則

Wake Liu
興趣使然的程式猿
4 min readJan 29, 2016

一般開發者在網站弄的差不多之後都會開始做最佳化處理,包括加掛 SSL、Cloud Flare 和 Javascript / CSS 優化等等。在現在的前端環境裡,CSS Framework 多到連走路都會不小心在路邊踢到,所以人手一個 CSS Framework 作為開發基底也是很正常的事。

常見的 CSS Framework 清單- Front-end CSS Frameworks — A collection of best front end frameworks for faster & easier web development

但每個專案大大小小,情況和情境都有不同,CSS Framework 當中的很多部份可能根本用不到每個專案當中,更不用說如果同時併用多個 CSS 套件時,實際的 CSS 平均用率常會降到一半以下,所以精簡化 CSS 是還滿重要的一個步驟(以 Product 環境來說)。另外我也考慮 Google PageSpeed Insights 一直在報的 CSS 資源禁止轉譯問題,如果把 CSS 精簡的夠小,是否可以直接塞進 HTML 當中而不用連到外部檔案。

Google PageSpeed Insights 建議,清除禁止轉譯的 CSS 資源

上 Google 用 removeunusedcss 等關鍵字找了些工具,以下介紹幾個我有試過的。

unused-css.com

unused-css.com 提供 單一網址 的線上掃描並計算各 CSS 檔案的使用率。如果要掃描全站(多網頁)必須輸入 Email 等他掃完通知你,另外下載整理過的 CSS 必須要是 付費會員 才行,看起來沒有 API 可串。

CSS remove and combine (Chrome Extension)

CSS remove and combine 是一個 Chrome 外掛,可以直接幫你分析、清理並合併當前網頁的所有 CSS 檔案,可是他不支援由 Javascript 所產生的變動(元素、類別增減等等),此外也有一些小 Bug,不太適合用在整合開發中。

purifycss/purifycss

purifycss/purifycss 是一個用 Nodejs 寫的開源專案,除了基本的 HTML 外,更支援 Javascript 檔案或 Angular 等各式 JS 框架程式碼內的 CSS 解析,是非常強大的一款工具,Github star 數超過 5k 的超高分。但是在不使用其他整合工具(如 Grunt、Gulp 等等)只用 command line 的情況下,沒辦法直接支援多網址(檔案)的參數設定。因為我個人不喜歡調用一大堆的 Build 工具,所以只好暫時先放棄這一套。

giakki/uncss

giakki/uncss 也是一個 Nodejs 的開源專案,支援多網址、本地和遠端 CSS 檔案等,但它不會進入拆解 Javascript 內容,只針對 render 完成的 HTML(包含由 Javascript 所產生的部份)做分析,所以如果是動態指派(或條件觸發)的部份可能就會一併被清理掉。

結論上,對我而言,Uncss 在 command line 的參數比起 Purifycss 要更適合整合到我的 PHP 專案,所以最後決定採用這套工具。但有個小 Bug 是我怎麼設定都無法載入 local css file,只好先傳到網站主機上再一併解析。透過手動執行一個 PHP 檔案來跑,每次改完 CSS 就讓它掃描多頁面再一併產出最終可用的 CSS 內容,雖然麻煩了點但還是值得。

--

--