Her er saken om “ubrukte CSS” verktøy

0
29

Det finnes en rekke verktøy som har som mål å hjelpe deg med å fjerne “ubrukte CSS” fra prosjektet. Aldri en uke går av som jeg ikke ser et verktøy for dette, deles eller fremmet. Det må finne en slags perfekt akkord for noen utviklere. Jeg bryr meg om ytelse, og jeg vet at å redusere filstørrelser er bra for ytelsen. Faktisk er det. Jeg vedder på at vi har CSS som er ubrukte i vår stilark, hvis vi fjernet det, at det er en prestasjon å vinne. Jepp, det ville være. Vi skal automatisere det. Ehhhhhh, jeg er ikke så sikker på.

Det er stor ytelse verktøy spillere som spiller opp denne ideen, som Fyrtårn og hvordan det gir deg CSS og JS “Dekning”, som vil sikkert fortelle deg at du sender koden som du ikke trenger å være.

Verktøy som hevder å hjelpe deg med ubrukte CSS har til å utføre analyser for å bli i stand til å fortelle deg hva som er ubrukt og hva som ikke er det.

Her er én måte å gjøre det på analyse. Gjengi en side på nettstedet ditt og få den komplette DOM. Deretter får den komplette CSSOM så vel, som kan gi deg et utvalg av alle velgere i CSS. Loop over de velgere og gjøre en querySelector i DOM og se om det samsvarer med hva som helst. Hvis det ikke gjør det, at CSS selector er ubrukt.

Smart, ikke sant?!

Jeg tror det. Men som analysen gir et ganske begrenset bilde.

Si at analyser som går to sekunder etter at siden er ferdig, men det er noen JavaScript som kjører og injiserer en modal etter fem sekunder (ughghk, jeg vet). Analysen ville ha gått glipp av HTML i at modal, som trolig har stiler, og dermed ville ha feil rapportert disse stilene som ubrukt.

Så, timing er en faktor. Forhåpentligvis, dette analyseverktøyet har noen måte å konfigurere flere tidspunkter.

Vi er også bare se på en side så langt. Selvfølgelig, et nettsted kan ha titalls hundrevis, eller tusenvis av sider. For å være helt sikker på om ubrukte maler, og ser på alle av dem er den mest sikker-brann innsats.

Flere sider er en annen faktor. Forhåpentligvis vil en analyse verktøyet har en måte å se på så mange sider som du forteller det til. Kanskje kan se på en sitemap?

Husk timing ting? Vi kan tenke på tidtakingen som en generisk form av staten. Det finnes utallige andre ting som kan være tilstand relatert. Er brukeren som er logget på eller ikke? Hva planen er de på? Er deres kredittkort utløpt dermed viser noen form for spesiell melding? Gjør situational ting som tid/dato/geolocation endrer tilstand? Hva med real-time data? Ting fra et API?

Program-nivå staten er helt klart en stor faktor. Forhåpentligvis, dette analyseverktøyet kan utløse/set alle mulige kombinasjoner av staten.

Det er interaktive staten. Hva om modals som kommer opp fordi det er noe du har klikket på? Hva er den aktive fanen? Er denne menyen for å åpne eller lukket? Hva bla posisjon er de på? Det er uendelige variasjoner av dette. Tenk deg en advarsel bar som viser opptil sju sekunder etter at brukeren logger seg på for å varsle brukeren om deres utløpt kredittkort som inneholder en egendefinert stil, velger du meny som kan være i en åpen eller lukket tilstand, men bare på brukerinnstillinger.

Det virker usannsynlig at dette analyseverktøyet kan håndtere alle disse mulighetene. Selv med massevis av konfigurasjon, mock state, og integrasjonstesting, det kunne ikke dekke nesten uendelig mulige permutasjoner av alt dette.

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. Eller ta en annen teknologisk trinn og gjøre noe som vil legge til et bakgrunnsbilde for de ubrukte velgere og sjekk server logger, for å se om de blir truffet.

Det skal være sagt at dette er hele ideen av ubrukte CSS er en del av CSS-i-JS saga at bransjen vår er å gå gjennom. Hvis alle stiler er skrevet som en del av komponenter, er det ganske er ingen ubrukte CSS. Enten komponenten blir brukt og stiler som kommer med det, eller det ikke. Hvis du er spesielt følsomme om fare for ubrukte CSS, som alene kan påvirke deg mot en CSS-i-JS-verktøyet.

Det bør også være sagt at denne DOM og CSSOM analyse teknikk er bare en mulig måte å kontrollere for ubrukte maler. Hvis du hadde noen slags fancy verktøy som kan analysere alle dine maler, stiler og skript, antagelig som kan avgjøre ubrukte maler som godt. Vi snakker om at i de siste ShopTalk Viser episoden med Chris Eppstein.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!