CSS-dækning og ubrugte typografier

Store CSS-filer indeholder ofte stile til komponenter, der ikke findes på den aktuelle side. Hver ubrugt byte øger fortolkningstiden, tiden til opbygning af CSSOM og overførselsstørrelsen. En typisk produktionsapp kan have 90 % eller mere ubrugt CSS på en given side.

Åbn DevTools → Coverage-panelet (Cmd+Shift+P → Coverage). Start optagelsen, interagér med siden, og stop derefter optagelsen. Panelet viser hver CSS-fil med den anvendte procentdel og fremhæver ubrugte regler med rødt. Eksportér dækningsdata som JSON til analyse.

PurgeCSS gennemgår dine HTML-, JS- og skabelonfiler for klassenavne og fjerner ubrugte CSS-regler. Konfigurér content-globs, så de omfatter alle filer, der kan referere til klassenavne. Føj klasser, der bruges dynamisk (tilføjet af JS), til safelisten for at forhindre utilsigtet fjernelse.

Tailwinds JIT-kompilator genererer kun de hjælpeklasser, der faktisk bruges i dine skabeloner. Den resulterende CSS er meget lille — ofte 5-15 KB for en hel applikation — fordi ubrugte hjælpeklasser aldrig genereres. Det er det ideelle resultat af oprydningen.

Tilføj PurgeCSS i en webpack- eller Vite-konfiguration med content-globs, der dækker alle skabelonfiler. Indstillingen safelist accepterer strenge, regulære udtryk og deep-safelist til komplekse dynamiske klassemønstre fra biblioteker som Headless UI.

CSS Modules genererer unikke klassenavne pr. fil og fjerner ubrugte moduler med bundler-konfiguration. Kun importerede CSS-moduler inkluderes i bundlen — komponentnær placering fjerner naturligt ubrugte globale stile.

Opdel CSS efter rute i frameworks som Next.js (CSS-ekstraktion pr. side), eller brug dynamiske imports sammen med CSS-moduler. Hver side indlæser kun sine egne stile, så dækningsanalyse pr. side bliver meningsfuld i stedet for analyse af hele applikationen.

Lighthouse-revisionen "Reduce unused CSS" estimerer den mulige besparelse i bytes ved at fjerne ubrugte regler. Den identificerer specifikke stylesheet-ressourcer med en stor andel ubrugt indhold. Brug den som hjælp til at prioritere, hvilke filer der skal gennemgås først.

Dækningsanalysen registrerer kun tilstande, der er synlige under optagelsen. Tilstande ved hover, åbne modaler, fejltilstande og godkendte tilstande skal udløses manuelt under dækningsoptagelsen for at undgå, at deres stile fejlagtigt fjernes.

Monolitiske globale stylesheets ophober ubrugt CSS over tid, efterhånden som funktioner fjernes. CSS pr. komponent (CSS Modules, Styled Components, Tailwind-hjælpeklasser) er lettere at rydde op i, fordi stilene ligger sammen med komponenterne og fjernes samtidig med dem.

For store ældre CSS-filer: Brug UnCSS eller PurgeCSS i rapporteringstilstand først. Sortér regler efter brugsfrekvens. Udtræk og slet tydeligt ubrugte stile fra leverandørplugins. Arbejd trinvist for at undgå utilsigtet fjernelse af stile til sjældne tilstande.

CSS-dækningsanalyse med DevTools Coverage og Lighthouse identificerer ubrugte regler. PurgeCSS og Tailwind JIT automatiserer fjernelsen af død kode. CSS Modules og opdeling efter rute forhindrer ophobning af ubrugte stile. Tilsammen minimerer de CSS-mængden og fortolkningstiden.