Oanvända

0
40

Jag skrev nyligen om Här är med “oanvända CSS” verktyg, där jag försökt att räkna upp alla de utmaningar som vilket verktyg som helst skulle finna verkligen är “oanvänt” CSS. Den övergripande idén är att CSS-selektorer match element i DOM, och de element i DOM kommer från alla möjliga ställen: din statiska mallar, dynamiska mallar baserade på server-sidan staten, och naturligtvis, JavaScript, som kan manipulera DOM på något sätt, inklusive att dra saker från Api: er och tredje part.

Med alla att spela på, hur kan någon verktyg för att ge oss en riktigt korrekt bild av oanvända CSS, till den grad att faktiskt ta bort CSS är inte lika farligt som att lämna den ensam?

Så jag sa:

Och ändå, jag tror inte att dessa verktyg är värdelösa — de är bara…verktyg. Deras användning kan faktiskt vara ett positivt steg mot bättre kod. Deras användning säger OK, jag erkänner det, jag är lite rädd för vår CSS. Du kan använda detta verktyg för att få en bred bild av vad dina oanvända CSS kan vara, för att sedan kombinera det med dina egna kunskaper i din CSS-kod bas för att fatta mer informerade beslut.

Jag står fast vid det, och det är värt att påpeka några framgångsrika användningsfall.

Sarah Dayan skrev bara Hur jag tappade 250KB av döda CSS vikt med PurgeCSS. Hon var med Medvind CSS, en atomär CSS bibliotek att många människor har haft framgång med.

I mitt fall, inte nog med att jag ladda hela Medvind CSS bibliotek, men jag har också lagt till flera varianter för att vissa moduler. Det slutade att göra den slutliga minified CSS-fil vikt 259 KB (innan GZip).

Det är en tiondel av att när gzip, men fortfarande, det är en hel del CSS. Medvind rekommenderar att du använder PurgeCSS, och det är vad Sarah gjorde. PurgeCSS inte hantera alla saker som jag nämnde, som staten variationer och JavaScript och whatnot, men det ser i alla statiska filer som du skulle vilja att det—både innehållet och CSS—och gör en analys från dem. Ännu bättre, Sarah visste att hon hade någon tredje part grejer på gång, så hanteras den situationen specifikt:

PurgeCSS kan inte känna att jag måste hålla väljare till exempel .ais-att Lyfta fram, eftersom de komponenter som använder den bara visa upp DOM vid runtime.

Så hon delade ut en del av att CSS och uppdaterat konfigurationen. Sedan…

Med denna nya konfiguration, min sista CSS-fil har gått från 259 KB för att…9 KB!

Jag älskar det. Med hjälp av verktyget, är super medveten om vad som händer på din webbplats, och för att göra slutliga val för en kombinerad vinna.

Sarah nämner också hur detta begrepp oanvända CSS är relaterade i anden att begreppet oanvända JavaScript. I JavaScript, som det kallas trädet skakade, och som Jeremy Wagner uttrycker det:

Träd skakning är en form av död kod eliminering.

Jag litar verktyg för träd skakar mycket mer implicit. Dessa är verktyg som skrivs i JavaScript för att titta på JavaScript för att upptäcka JavaScript som inte används. Det verkar som skärningspunkten mellan teknik är inte så stort när vi pratar om träd skaka. Fortfarande, det kan vara saker som konfigurerats tredje parter att ringa offentliga funktioner på din webbplats, eller händelsehanterare direkt på HTML-element. De saker som verkar lite mer sällsynt för mig dessa dagar, men det är bara min egen erfarenhet bias.