CSS-täckning och oanvända format

Stora CSS-filer innehåller ofta formatmallar för komponenter som inte finns på den aktuella sidan. Varje oanvänd byte ökar tiden för parsning, skapande av CSSOM och överföring. En typisk produktionsapp kan ha 90 % eller mer oanvänd CSS på en given sida.

Öppna DevTools → Coverage-panelen (Cmd+Shift+P → Coverage). Starta inspelningen, interagera med sidan och stoppa sedan inspelningen. Panelen visar varje CSS-fil med användningsprocent och markerar oanvända regler med rött. Exportera täckningsdata som JSON för analys.

PurgeCSS genomsöker HTML-, JS- och mallfiler efter klassnamn och tar bort oanvända CSS-regler. Konfigurera innehållsmönster som omfattar alla filer som kan referera till klassnamn. Lägg till klasser som används dynamiskt (och läggs till av JS) i safelistan för att förhindra att de tas bort av misstag.

Tailwinds JIT-kompilator genererar endast de utility-klasser som faktiskt används i mallarna. Den resulterande CSS-filen blir mycket liten — ofta 5–15 KB för en hel applikation — eftersom oanvända utilities aldrig genereras. Detta är det ideala resultatet av rensningen.

I en webpack- eller Vite-konfiguration lägger ni till PurgeCSS med innehållsmönster som omfattar alla mallfiler. Alternativet safelist accepterar strängar, reguljära uttryck och deep-safelist för komplexa dynamiska klassmönster från bibliotek som Headless UI.

CSS Modules genererar unika klassnamn per fil och tree-shakar oanvända moduler när bundlern är konfigurerad för det. Endast importerade CSS-moduler inkluderas i paketet — när stilar och komponenter ligger tillsammans försvinner oanvända globala stilar naturligt.

Dela upp CSS per route i ramverk som Next.js (extrahering av CSS per sida) eller använd dynamiska importer med CSS Modules. Varje sida laddar endast sina egna stilar, vilket gör täckningsanalys per sida, i stället för per applikation, meningsfull.

Lighthouse-granskningen "Reduce unused CSS" uppskattar hur många byte som potentiellt kan sparas genom att ta bort oanvända regler. Den identifierar specifika formatmallsresurser med hög andel oanvänd kod. Använd den som vägledning för att prioritera vilka filer som ska granskas först.

Täckningsanalysen fångar endast tillstånd som är synliga under inspelningen. Hover-tillstånd, öppna modalfönster, feltillstånd och autentiserade tillstånd måste aktiveras manuellt under täckningsinspelningen för att deras stilar inte ska rensas bort av misstag.

Monolitiska globala formatmallar samlar på sig oanvänd CSS över tid när funktioner tas bort. CSS per komponent (CSS Modules, Styled Components, Tailwind-utilities) är enklare att rensa eftersom stilarna hör ihop med sina komponenter och tas bort tillsammans med dem.

För stora äldre CSS-filer: använd UnCSS eller PurgeCSS i läget report-only först. Sortera reglerna efter hur ofta de används. Extrahera och ta bort tydligt oanvända stilar från leverantörsplugins. Arbeta stegvis för att undvika att stilar för ovanliga tillstånd tas bort av misstag.

Analys av CSS-täckning med DevTools Coverage och Lighthouse identifierar oanvända regler. PurgeCSS och Tailwind JIT automatiserar eliminering av död kod. CSS Modules och uppdelning per route förhindrar att oanvända stilar samlas på hög. Tillsammans minimerar de CSS-mängden och tiden för parsning.