Hier is het ding over “ongebruikte CSS” tools

0
27

Er zijn veel hulpmiddelen die doel om u te helpen verwijderen “ongebruikte CSS” van uw project. Nooit een week voorbij dat ik niet een tool voor dit gedeeld of gepromoot. Het moet staking een soort van perfecte snaar voor sommige ontwikkelaars. Ik me zorgen over prestaties, en ik weet dat het verminderen van bestandsgrootte is goed voor de prestaties. Inderdaad, het is. Ik wed dat we CSS die wordt gebruikt in onze stylesheets, als we verwijderd van die, dat is een prestatie winnen. Yep, het zou worden. We moeten automatiseren. Ehhhhhh, ik ben niet zo zeker van.

Er zijn grote prestaties gereedschap spelers die spelen van het idee, zoals de Vuurtoren en hoe geeft u de CSS-en JS “Dekking”, die zeker zal u vertellen dat u verzendt code die u niet hoeft te worden.

De tools die beweren om u te helpen met ongebruikte CSS hebben om analyses uit te voeren in staat zijn om u te vertellen wat ongebruikt is en wat niet.

Hier is een manier om dat te doen-analyse. Het renderen van een pagina van uw website en ontvang het volledige DOM. Vervolgens krijgen de volledige CSSOM, die kan je een array van alle kiezers in je CSS. Loop over die keuzemogelijkheden en een querySelector in de DOM en kijk of het overeenkomt met iets. Als dit niet gebeurt, is dat de CSS selector wordt gebruikt.

Slim, toch?!

Ik denk het wel. Maar die analyse schetst een nogal beperkt beeld.

Zeggen dat de analyse wordt uitgevoerd op twee seconden nadat de pagina is voltooid, maar er is een JavaScript dat draait en injecteert een modaal na vijf seconden (ughghk, ik weet het). De analyse zou hebben gemist de HTML-code in die modaal, die heeft waarschijnlijk stijlen, en dus zou verkeerd hebben gemeld die stijlen als ongebruikt.

Dus de timing is één factor. Hopelijk, dit analyse-instrument is een manier om het configureren van meerdere tijden.

We zijn ook alleen zoeken op een pagina is zo ver. Natuurlijk, een site kan tientallen, honderden of duizenden pagina ‘ s. Om helemaal zeker over ongebruikte stijlen, te kijken naar alle van hen is de meest zekere weddenschap.

Meerdere pagina ‘ s is een andere factor. Hopelijk, een analyse-instrument is een manier om te kijken naar zoveel pagina ‘ s als u aangeeft dat het moet. Misschien kan er bij een sitemap?

Vergeet niet de timing ding? We zouden kunnen denken dat de timing als een generieke vorm van staat. Er zijn talloze andere dingen die kunnen worden-staat gerelateerd. De gebruiker Is ingelogd of niet? Wat plan zijn ze op? Is hun creditcard is verlopen dus laat het enkele soort speciale boodschap? Doen situationele zaken als tijd/datum/geolocatie veranderen staat? Wat over real-time data? Spullen van een API?

Application-level staat is duidelijk een grote factor. Hopelijk, dit analyse-instrument kan activeren/instellen van alle mogelijke combinaties van state.

Er is een interactieve staat. Wat over modals dat komen omdat er iets is geklikt? Wat is het actieve tabblad? Is dit menu-open of gesloten? Wat ga positie zijn ze? Er zijn oneindig veel combinaties van deze. Stel je een waarschuwing balk die verschijnt zeven seconden nadat de gebruiker zich in te waarschuwen voor de gebruiker over hun verlopen creditcard en bevat een aangepaste stijl selecteert u menu dat kan worden in een open of gesloten toestand, maar alleen op de instellingen pagina.

Het lijkt onwaarschijnlijk dat deze analyse tool kan omgaan met al die mogelijkheden. Zelfs met de lasten van de configuratie, mock staat, en integratie testen, het kon niet dekken de bijna oneindig aantal mogelijke permutaties van dit alles.

En toch, ik denk niet dat deze tools zijn nutteloos — ze zijn gewoon…tools. Hun gebruik kan zelfs een positieve stap in de richting van betere code. Hun gebruik zegt OK, ik geef het toe, ik ben een beetje bang onze CSS. U zou dit kunnen gebruiken hulpmiddel voor het verkrijgen van een breed beeld van wat je ongebruikte CSS zou kunnen worden, dan combineer dat met uw eigen kennis van uw CSS-code base om beter geïnformeerde beslissingen te nemen. Of neem een andere technologische stap en iets te doen zoals het toevoegen van een achtergrond afbeelding om deze ongebruikte keuzemogelijkheden en controleer de server logs om te zien als ze geraakt worden.

Het moet gezegd worden dat dit hele idee van ongebruikte CSS is een deel van de CSS-JS saga van onze industrie gaat door. Als je alle stijlen zijn geschreven als onderdeel van componenten, er is een beetje geen ongebruikte CSS. Het onderdeel wordt gebruikt en de stijlen komen met het, of dit niet het geval. Als je bent bijzonder gevoelig over het gevaar van niet-gebruikte CSS, alleen dat al zou kunnen beïnvloeden je in de richting van een CSS-JS tool.

Het moet ook gezegd worden dat dit DOM en CSSOM analyse techniek is slechts één mogelijke manier van het controleren van ongebruikte stijlen. Als je had een soort van fancy gereedschap dat kon analyseren al uw sjablonen, stijlen en scripts, vermoedelijk dat zou kunnen bepalen van ongebruikte stijlen. We praten over die in de recente ShopTalk Show aflevering met Chris Eppstein.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!