使用Chrome Audits功能清理無用的css
阿新 • • 發佈：2018-12-31
Google chrome在“開發者工具”中提供了類似 dust-me 的冗餘css檢測功能。 chrome使用者可以在Audits面板內使用這個功能： 選擇 Web Page Performance 選框並點選Run，會得到類似如下格式的提示
Remove unused CSS rules (185)35.39KB (51%) of CSS is not used by the current page.> my.release.css: 35.39KB (51%) is not used by the current page.這裡顯示了當前頁面載入但沒有用到的css樣式檔案和樣式名稱列表，點選css檔名前的 箭頭可以展開得到一個列表。如果冗餘內容很少，就可以直接分析一下然後到檔案內刪掉了。 需要注意的是，這個功能只是分析當前頁面，所以很多其他頁面需要但當前頁沒有使用的樣式 也會列出。所以需要謹慎操作，完全確定了是冗餘的樣式，再手工清除。
我主要用這個功能去除一些想要借鑑的頁面中冗餘的css，都是從網站上直接儲存來的單獨頁面。 所以我自制了批量清理工具。
我進行批量清理的步驟（由於Audits會將很多全域性css認作unused，故批量清理比較危險，僅作學習使用）：
- 將冗餘的css列表儲存成keys.txt
- 一般下載來的css都是壓縮後的，不方便檢視，這裡我先將加密的css檔案格式化：Replace regexp (default } -> }^J): RET
- 開啟 keys.txt 和 需要精簡的css檔案，在 * scratch * 內使用 C-x C-e 執行以下程式碼： 由於chrome分析出的結果可能重複，這段小程式使用了cl的去重方法。
)