PurgeCSS ist ein großartiges Tool, das ungenutztes CSS von Ihrer Website entfernt. In diesem Abschnitt werden wir näher darauf eingehen, wie PurgeCSS funktioniert und worauf wir achten sollten.

Wie es funktioniert?

Für PurgeCSS muss die folgende Konfiguration festgelegt werden.

config.toml

1[build]
2  writeStats = true
3[taxonomies]
4  author = 'authors'
5  category = 'categories'
6  series = 'series'
7  tag = 'tags'

config.yaml

1build:
2  writeStats: true
3taxonomies:
4  author: authors
5  category: categories
6  series: series
7  tag: tags

config.json

 1{
 2   "build": {
 3      "writeStats": true
 4   },
 5   "taxonomies": {
 6      "author": "authors",
 7      "category": "categories",
 8      "series": "series",
 9      "tag": "tags"
10   }
11}

Es weist Hugo an, verwendete Tags, Klassen und IDs zu berechnen und generiert dann das hugo_stats.json.

1{
2  "htmlElements": {
3    "tags": [],
4    "classes": [],
5    "ids": []
6}

Schließlich verlässt sich PurgeCSS auf diese Datei, um nicht verwendetes CSS zu löschen.

Das PurgeCSS funktioniert nur in der production Umgebung.

Wir empfehlen NICHT, postcss.config.js und assets/main/config/rtl/postcss.config.js zu überschreiben, da sonst bei Versionsaktualisierungen unerwartete Probleme auftreten.

Einschränkungen

hugo_stats.json funktioniert nur in *.html-Vorlagen, d. h. alle in JavaScript-Dateien verwendeten CSS-Klassen, Tags und IDs werden weiterhin gelöscht.

Aber keine Sorge, es gibt zwei Möglichkeiten, dieses Problem zu lösen.

Zusätzliche Statistiken

Erstellen Sie einfach eine Datei namens extra_stats.json mit der gleichen Form von hugo_stats.json im Stammverzeichnis Ihrer Website und fügen Sie das zusätzliche CSS manuell ein.

extra_stats.json MUSS in Ihrem Repo verankert sein.

HTML-Block in *.html Dateien einfügen

Ein häufiges Szenario ist das Rendern von HTML-Blöcken mit JavaScript. Wenn Sie JavaScript zum Generieren eines DOM-Elements verwenden, wird jegliches verwendete CSS von hugo_stats.json ignoriert. Natürlich können Sie es manuell zu extra_stats.json hinzufügen, aber es gibt eine bessere Möglichkeit, dies über die Template-Engine zu tun.

  1. Zuerst müssen wir einen Vorlagenblock in *.html Teiltönen definieren.
1<div class="d-none" id="template-custom-widget-foo">
2  <div class="custom-widget-foo"></div>
3</div>
4
5<script type="text/html" id="template-custom-widget-bar">
6  <div class="custom-widget-bar">
7    NOTE THAT: ANY CSS INSIDE THE SCRIPT TAG WONT BE INCLUDED INTO THE STATS FILE.
8  </div>
9</script>

Hugo berechnet das verwendete CSS in hugo_stats.json.

1$ cat hugo_stats.json | grep custom-widget-
2  "custom-widget-foo",
3  "template-custom-widget-foo",
4  "template-custom-widget-bar",

Wie Sie sehen können, wird das im Tag <script> verwendete CSS(custom-widget-bar) nicht in hugo_stats.json eingebunden, daher sollten wir andere HTML-Tags mit der Klasse d-none verwenden, um Ihre Vorlage zu umschließen.

d-none ist ein Bootstrap-CSS-Dienstprogramm, entspricht display: none.

  1. Und rendern Sie dann die Vorlage über eine beliebige Template-Engine.
1const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
2render(tmpl, data);

Testen

Sie müssen die production-Umgebung für lokale Tests über hugo server -e production -b http://localhost:1313 angeben, da PurgeCSS nur in der production-Umgebung funktioniert.

Manchmal funktionieren PurgeCSS und PostProcess nicht sehr gut, daher müssen Sie Hugo Server möglicherweise gelegentlich neu starten.