Ubrukt

0
38

Jeg skrev nylig Her er saken om “ubrukte CSS” verktøy, hvor jeg prøvde å nummerere alle utfordringer verktøy ville ha i å finne virkelig “ubrukte” CSS. Den overordnede ideen er at CSS-velgere stemmer elementer i DOM, og de som elementer i DOM kommer fra alle slags steder: statiske maler, dynamiske maler basert på server-siden staten, og selvfølgelig, JavaScript, som kan manipulere DOM på noen måte i det hele tatt, inkludert dra ting fra Api-er og tredjeparter.

Med alle som på spill, hvordan kan noen verktøyet gir oss en virkelig nøyaktig bilde av ubrukte CSS, til det punktet at faktisk fjerne at CSS ikke er like farlig som å forlate det alene?

Så, jeg sa:

Og likevel, jeg tror ikke disse verktøyene er ubrukelig — de er bare…verktøy. Deres bruk kan faktisk være et positivt skritt mot bedre kode. Deres bruk, sier OK, jeg innrømmer det, jeg er litt redd for at våre CSS. Du kan bruke dette verktøyet til å få et bredt bilde av hva dine ubrukte CSS kan være, og deretter kombinere dette med egen kunnskap i CSS-koden base for å gjøre mer informerte beslutninger.

Jeg står ved det, og det er verdt å peke på noen vellykkede tilfeller.

Sarah Dayan bare skrev hva jeg droppet 250KB av døde CSS vekt med PurgeCSS. Hun var ved hjelp av Medvind CSS, en atom-CSS-biblioteket som mange mennesker har hatt suksess med.

I mitt tilfelle, ikke bare gjorde jeg inn hele Medvind CSS biblioteket, men jeg har også lagt til flere varianter til noen moduler. Som endte opp med å lage den endelige minified CSS-fil vekt 259 KB (før GZip).

Det er en tidel av det som når gzip, men likevel, det er mye av CSS. Medvind anbefaler å bruke PurgeCSS, og det er hva Sarah gjorde. PurgeCSS ikke kan håndtere noen av tingene jeg nevnte, som staten variasjoner og JavaScript og whatnot, men det ser i alle statiske filer du ønsker det—både innhold og CSS—og gjøre analyser fra disse. Enda bedre, Sara visste at hun hadde noen tredjepart ting som skjer, så håndtert denne situasjonen spesielt:

PurgeCSS kan ikke oppdage at jeg må holde på velgere som .ais-Høydepunkt, fordi de komponenter som bruker det bare dukke opp i DOM på kjøring.

Så hun delt av noen av CSS og oppdatert konfigurasjonen. Deretter…

Med denne nye konfigurasjonen, min endelige CSS-filen har gått fra 259 KB til…9 KB!

Jeg elsker det. Ved hjelp av verktøyet, blir super klar over hva som skjer på nettstedet ditt, og foreta endelige valg for en kombinert vinne.

Sarah nevner også hvordan dette konseptet av ubrukte CSS er i slekt i ånden til begrepet ubrukte JavaScript. I JavaScript, er det referert til som treet skalv, og som Jeremy Wagner sier det:

Treet skalv er en form for død koden eliminering.

Jeg stoler verktøy for treet skalv mye mer implisitt. Dette er verktøy som er skrevet i JavaScript for å se på JavaScript for å oppdage JavaScript som ikke er brukt. Det virker som skjæringspunktet av teknologi er ikke like bredt når vi snakker om treet ristet. Likevel, det kan være ting som er konfigurert til tredjeparter som ringer offentlige funksjoner på nettstedet ditt, eller event-handlere direkte på HTML-elementer. De ting virker litt mer sjeldent til meg i disse dager, men det er bare min egen erfaring bias.