De PurgeCSS is een geweldige tool die ongebruikte CSS van uw site verwijdert. In deze sectie gaan we dieper in op hoe de PurgeCSS werkt en waar we op moeten letten.

Hoe het werkt?

Voor PurgeCSS moet de volgende configuratie worden ingesteld.

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}

Het vertelt Hugo de gebruikte tags, klassen en ID’s te berekenen en genereert vervolgens de hugo_stats.json.

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

Ten slotte vertrouwt PurgeCSS op dit bestand om ongebruikte CSS te verwijderen.

De PurgeCSS werkt alleen onder de production-omgeving.

We raden NIET aan om postcss.config.js en assets/main/config/rtl/postcss.config.js te overschrijven, anders zullen er onverwachte problemen optreden tijdens versie-updates.

Beperkingen

De hugo_stats.json werkt alleen in *.html-sjablonen, dat wil zeggen dat alle CSS-klassen, tags en id’s die in JavaScript-bestanden worden gebruikt, nog steeds worden verwijderd.

Maar maak je geen zorgen, er zijn twee manieren om dit probleem op te lossen.

Extra statistieken

Maak gewoon een bestand met de naam extra_stats.json met dezelfde vorm hugo_stats.json in de hoofdmap van uw site en plaats de extra CSS daar handmatig in.

extra_stats.json MOET toegewijd zijn aan uw repository.

Plaats HTML-blok in *.html-bestanden

Een veel voorkomend scenario is het renderen van HTML-blokken met JavaScript. Als u JavaScript gebruikt om DOM-elementen te genereren, wordt alle gebruikte CSS genegeerd door hugo_stats.json. Natuurlijk kunt u het handmatig toevoegen aan extra_stats.json, maar er is een betere manier om dat via de sjabloonengine te doen.

  1. Ten eerste moeten we een sjabloonblok definiëren in *.html gedeeltelijke waarden.
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 zal de gebruikte CSS berekenen 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",

Zoals u kunt zien, wordt de CSS(custom-widget-bar) die in de <script>-tag wordt gebruikt, niet opgenomen in hugo_stats.json, dus we moeten andere HTML-tags gebruiken met de klasse d-none om uw sjabloon in te pakken.

d-none is een Bootstrap CSS-hulpprogramma, gelijk aan display: none.

  1. En render de sjabloon vervolgens via een willekeurige sjabloonengine.
1const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
2render(tmpl, data);

Testen

U moet de production-omgeving opgeven voor lokaal testen via hugo server -e production -b http://localhost:1313, aangezien de PurgeCSS alleen werkt in de production-omgeving.

Soms werken PurgeCSS en PostProcess niet zo goed, dus het kan zijn dat u Hugo Server af en toe opnieuw moet opstarten.