PurgeCSS 是一個很棒的工具，可以從你的網站上刪除未使用的 CSS。 在本節中，我們將深入探討 PurgeCSS 是如何工作的，以及我們應該註意什麽。
它是如何工作的？#
PurgeCSS 需要設置以下配置。
1[build]
2 writeStats = true
1build:
2 writeStats: true
1{
2 "build": {
3 "writeStats": true
4 }
5}
其告訴 Hugo 計算已使用的標簽、類和 ID，然後生成hugo_stats.json。
1{
2 "htmlElements": {
3 "tags": [],
4 "classes": [],
5 "ids": []
6}
最後 PurgeCSS 依靠這個文件來清除未使用的 CSS。
PurgeCSS 只在
production環境下工作。
我們不建議覆蓋這些文件
postcss.config.js和assets/main/config/rtl/postcss.config.js，否則在版本更新中會出現意想不到的問題。
局限性#
hugo_stats.json 只適用於 *.html 模板，也就是說，任何用於 JavaScript 文件的 CSS 類、標簽和 ID 仍然會被清除。
但是不要擔心，有兩種方法可以解決這個問題。
額外的統計#
只要在你的網站根目錄下創建一個名為 extra_stats.json 的文件，其形式與 hugo_stats.json 相同，並手動將額外的 CSS 放入其中。
extra_stats.json必須被提交到你的倉庫中。
將HTML塊放入 *.html 文件中#
一個常見的情況是使用 JavaScript 渲染 HTML 塊，如果你使用 JavaScript 來生成 DOM 元素，任何使用的 CSS 都會被 hugo_stats.json 忽略。當然你可以手動添加到 extra_stats.json 中，但有一個更好的方法通過模板引擎來實現。
- 首先，我們需要在
*.html布局定義一個模板塊。
1<script type="text/html" id="template-search-results">
2 <div class="search-results">
3 ...
4 </div>
5</script>
Hugo 會將使用過的 CSS 計算到 hugo_stats.json 中，例如 search-results。
- 然後通過任意的模板引擎渲染模板。
1const tmplSearchResults = document.getElementById('template-search-results').innerHTML;
2render(tmplSearchResults, data);
測試#
你需要通過 hugo server -e production -b http://localhost:1313 指定 production 環境進行本地測試，因為 PurgeCSS 只在 production 環境下工作。
有時候，PurgeCSS 和 PostProcess 工作不是很正常，這時候你可能需要偶爾重啟下 Hugo Server。
評論