Ongebruikte

0
20

Onlangs schreef ik Hier is het ding over “ongebruikte CSS” tools, waar ik geprobeerd om het opsommen van de uitdagingen waar elke tool zou hebben in het vinden van echt “ongebruikte” CSS. De overkoepelende gedachte is dat CSS selectors overeenkomen met elementen in de DOM, en die elementen in de DOM komen uit allerlei plaatsen: uw statische templates, dynamische templates gebaseerd op de server-side state, en natuurlijk, JavaScript, die kan manipuleren van de DOM andere manier, inclusief de dingen van Api ‘ s en derden.

Met al dat spelen, hoe kan een hulpmiddel geven ons een echt accuraat beeld van ongebruikte CSS, tot het punt dat daadwerkelijk te verwijderen die CSS niet net zo gevaarlijk als het verlaten van het alleen zijn?

Dus ik zei:

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.

Ik steun dat, en het is de moeite waard te wijzen op een aantal succesvolle use cases.

Sarah schreef Dayan Hoe ik liet 250KB van dode CSS gewicht met PurgeCSS. Ze was met wind in de rug CSS, een atoom CSS bibliotheek dat veel mensen hebben succes gehad.

In mijn geval kreeg ik niet alleen de belasting van de gehele wind in de rug CSS bibliotheek, maar ik heb ook nog verschillende varianten om een aantal modules. Dat eindigde het maken van de definitieve minified CSS-bestand gewicht 259 KB (voordat GZip).

Het is een tiende van dat als een gzipped, maar toch, dat is een veel CSS. Wind in de rug raadt het gebruik van PurgeCSS, en dat is wat Sarah heeft. PurgeCSS niet verwerken van de dingen die ik noemde, staat variaties en JavaScript en whatnot, maar het lijkt op een statische bestanden die u zou willen dat het—zowel de inhoud als de CSS—en analyse. Nog beter, Sarah wist dat ze had een aantal derde-partij dingen aan de hand, zo behandeld dat de situatie in het bijzonder:

PurgeCSS niet kan detecteren die ik nodig heb om kiezers zoals .ais-Hoogtepunt, omdat de componenten die gebruik maken van het alleen te zien in de DOM tijdens runtime.

Zodat ze het afsplitsen van een deel van die CSS en bijgewerkt de configuratie. Daarna…

Met deze nieuwe configuratie, mijn laatste CSS-bestand is gegaan van 259 KB…9 KB!

Ik hou er van. Met behulp van de tool, wordt super bewust van wat er gebeurt op uw site, en het maken van definitieve keuzes voor een gecombineerde winnen.

Sarah vermeldt ook hoe dit concept van niet-gebruikte CSS is verbonden in de geest van het concept van ongebruikte JavaScript. In JavaScript, het is bedoeld als boom schudden, en zoals Jeremy Wagner zegt:

Boom schudden is een vorm van dode code eliminatie.

Ik vertrouw het gereedschap voor de boom schudden veel meer impliciet. Deze instrumenten zijn geschreven in JavaScript om naar te kijken JavaScript te ontdekken JavaScript niet gebruikt. Het lijkt alsof de kruising van de technologie is niet zo breed als we het hebben over de boom te schudden. Toch kunnen er dingen zoals geconfigureerd derde partijen die oproep publieke functies op uw site, of de gebeurtenis-handlers direct aan HTML-elementen. Die dingen lijken een beetje meer zeldzame mij deze dagen, maar dat is gewoon mijn eigen ervaring bias.