PurgeCSS es una herramienta increíble que elimina el CSS no utilizado de su sitio. En esta sección, profundizaremos en cómo funciona PurgeCSS y a qué debemos prestar atención.

¿Cómo funciona?

PurgeCSS requiere que se establezca la siguiente configuración.

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}

Le dice a Hugo que calcule las etiquetas, clases e identificadores utilizados y luego genera hugo_stats.json.

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

Finalmente, PurgeCSS se basa en este archivo para purgar el CSS no utilizado.

PurgeCSS solo funciona en el entorno production.

NO recomendamos anular postcss.config.js y assets/main/config/rtl/postcss.config.js; de lo contrario, se producirán problemas inesperados durante las actualizaciones de la versión.

Limitaciones

El hugo_stats.json solo funciona en plantillas *.html, es decir, todas las clases, etiquetas e identificadores de CSS utilizados en archivos JavaScript aún se eliminarán.

Pero no te preocupes, hay dos formas de solucionar este problema.

Estadísticas adicionales

Simplemente cree un archivo llamado extra_stats.json con la misma forma de hugo_stats.json en la raíz de su sitio y coloque el CSS adicional en él manualmente.

extra_stats.json DEBE estar comprometido con su repositorio.

Poner bloque HTML en archivos *.html

Un escenario común es renderizar bloques HTML usando JavaScript; si está usando JavaScript para generar un elemento DOM, hugo_stats.json ignorará cualquier CSS usado. Por supuesto, puedes agregarlo a extra_stats.json manualmente, pero hay una mejor manera de hacerlo a través del motor de plantillas.

  1. En primer lugar, necesitaremos definir un bloque de plantilla en *.html parciales.
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 calculará el CSS usado en 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",

Como puede ver, el CSS(custom-widget-bar) usado dentro de la etiqueta <script> no se incluirá en hugo_stats.json, por lo que debemos usar otras etiquetas HTML con la clase d-none para ajustar su plantilla.

d-none es una utilidad CSS Bootstrap, igual a display: none.

  1. Y luego renderice la plantilla a través de cualquier motor de plantillas.
1const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
2render(tmpl, data);

Pruebas

Deberá especificar el entorno production para las pruebas locales a través de hugo server -e production -b http://localhost:1313, ya que PurgeCSS solo funciona en el entorno production.

A veces, PurgeCSS y PostProcess no funcionan muy bien, por lo que es posible que deba reiniciar Hugo Server de vez en cuando.