Uw CSS-output controleren

Zelfs wanneer de JIT-engine van Tailwind ongebruikte stijlen verwijdert, kan je CSS-bundel voor productie onverwacht groeien. Je CSS-uitvoer controleren betekent dat je het uiteindelijke gecompileerde bestand inspecteert om te begrijpen wat erin terecht is gekomen, hoe groot het is en of er iets overbodigs doorheen is geslipt. Een slanke stylesheet wordt sneller geladen en verwerkt en verbetert de scores voor Core Web Vitals.

De eenvoudigste controle begint met het meten van de bestandsgrootte. Controleer na het bouwen van je project de grootte van het gegenereerde CSS-bestand. De gzip-grootte is het getal dat voor prestaties in de praktijk telt, omdat browsers bestanden tijdens het laden decomprimeren. Een goed afgestemde Tailwind-uitvoer is voor de meeste projecten doorgaans 5–15 KB groot na gzip-compressie.

Voer Tailwind tijdens de ontwikkeling uit in de watchmodus, zodat de stylesheet opnieuw wordt opgebouwd na elke wijziging in een bestand. Zo krijg je direct feedback over de invloed van nieuwe klassen op de uitvoergrootte. Gebruik de vlag --minify wanneer je de grootte meet, zodat je nauwkeurige productiewaarden krijgt in plaats van waarden uit de ontwikkelbuild.

Open het gecompileerde CSS-bestand en zoek naar klassennamen waarvan je vermoedt dat ze overbodig zijn. Als je honderden animatie-keyframes ziet die je nooit gebruikt, of een volledig kleurenpalet voor een kleur waarnaar je slechts één keer verwijst, zijn dat kandidaten om te verwijderen. Zoek met tekstzoekopdrachten naar je content-globs om te controleren of ze overeenkomen met de juiste bestanden.

De meest voorkomende oorzaak van overbodige inhoud is verkeerd geconfigureerde contentpaden. Als je content-array te breed is, scant Tailwind bestanden die het niet zou moeten scannen en vindt het tekenreeksen die op klassen lijken in buildartefacten, testgegevens of bibliotheken van derden. Als de array te beperkt is, worden echte klassen uit de productie verwijderd. Controleer eerst de content-array.

PurgeCSS kan als zelfstandig hulpprogramma worden uitgevoerd om te analyseren welke selectors in je stylesheet overeenkomen met je HTML-bestanden en welke niet. Hoewel Tailwind zelf ingebouwde verwijdering van ongebruikte stijlen heeft, geeft het afzonderlijk uitvoeren van PurgeCSS je een gedetailleerd afwijzingsrapport waarin precies wordt aangegeven welke klassen behouden zijn gebleven en welke zijn verwijderd.

Hulpprogramma's zoals Statoscope, webpack-bundle-analyzer of de ingebouwde modus ANALYZE=true van Next.js visualiseren je volledige bundel, inclusief CSS-bestanden. Ze tonen een treemap van wat ruimte inneemt, waardoor je onverwachte groepen Tailwind-klassen die een onevenredig groot aantal bytes gebruiken gemakkelijk kunt herkennen.

Een subtiele bron van overbodige inhoud zijn dynamisch samengestelde klassennamen die JIT als tekenreeksen detecteert en opneemt, ook al worden ze tijdens runtime nooit gebruikt. Als je bijvoorbeeld een klasse samenstelt uit een variabele zoals 'text-' + color, moet je veel varianten op de safelist zetten. Gebruik liever volledige klassennamen in je markup.

Als je een safelist aan je configuratie hebt toegevoegd, controleer die items dan regelmatig. Items op de safelist worden altijd opgenomen, ongeacht of ze in de gescande content voorkomen. Na verloop van tijd stapelen klassen uit oude functies zich op de safelist op. Daardoor voegen ze bytes toe aan elke productiebuild, zelfs nadat de functie is verwijderd.

Behandel de grootte van de CSS-uitvoer als een bijgehouden metriek in je CI-pipeline. Registreer na elke build de gzip-grootte in een bestand of dashboard. Wanneer de grootte onverwacht toeneemt tussen commits, gebruik je een bisect op de recente wijzigingen om de oorzaak te vinden. Veel teams stellen een groottelimiet in en laten de build mislukken wanneer die wordt overschreden.

Officiële Tailwind-plug-ins zoals @tailwindcss/typography en @tailwindcss/forms voegen honderden regels toe wanneer ze zijn ingeschakeld. Als je geen Prose-content of opgemaakte formulierelementen gebruikt, verwijder de plug-in dan uit je configuratie. Elke plug-in die je verwijdert, bespaart een betekenisvolle hoeveelheid bytes in de uiteindelijke bundel.

In deze les heb je geleerd dat je de gzip-grootte moet meten als belangrijkste metriek voor productie, dat je contentpaden moet controleren om te voorkomen dat er te veel of te weinig bestanden worden gescand en dat je ongebruikte plug-ins en safelist-items moet verwijderen om de bundel slank te houden. Hierna bekijken we het sorteren van klassen met de Prettier-plug-in.