Unused

Ich habe kürzlich Here’s the thing about “unused CSS” tools geschrieben, in dem ich versucht habe, alle Herausforderungen aufzulisten, die jedes Tool bei der Suche nach tatsächlich „ungenutztem“ CSS haben würde. Die übergreifende Idee ist, dass CSS-Selektoren Elemente im DOM abgleichen und diese Elemente im DOM aus allen möglichen Quellen stammen: Ihren statischen Vorlagen, dynamischen Vorlagen basierend auf serverseitigem Zustand und natürlich JavaScript, das das DOM auf beliebige Weise manipulieren kann, einschließlich des Abrufens von Dingen aus APIs und Drittanbietern.

Bei all dem im Spiel, wie kann irgendein Tool uns ein wirklich genaues Bild von ungenutztem CSS liefern, bis zu dem Punkt, dass das Entfernen dieses CSS nicht genauso gefährlich ist wie das Belassen?

Also, ich sagte

Und doch glaube ich nicht, dass diese Tools nutzlos sind – sie sind einfach…Werkzeuge. Ihre Verwendung kann tatsächlich ein positiver Schritt zu besserem Code sein. Ihre Verwendung sagt OK, ich gebe es zu, ich habe ein wenig Angst vor unserem CSS. Sie könnten dieses Tool verwenden, um ein grobes Bild davon zu bekommen, was Ihr ungenutztes CSS sein könnte, und dies dann mit Ihrem eigenen Wissen über Ihre CSS-Codebasis kombinieren, um fundiertere Entscheidungen zu treffen.

Dabei bleibe ich, und es lohnt sich, einige erfolgreiche Anwendungsfälle hervorzuheben.

Sarah Dayan hat gerade How I dropped 250KB of dead CSS weight with PurgeCSS geschrieben. Sie verwendete Tailwind CSS, eine atomare CSS-Bibliothek, mit der viele Leute Erfolg hatten.

In meinem Fall habe ich nicht nur die gesamte Tailwind CSS-Bibliothek geladen, sondern auch mehrere Varianten zu einigen Modulen hinzugefügt. Das führte dazu, dass die endgültige minimierte CSS-Datei 259 KB wog (vor GZip).

Es ist ein Zehntel davon, wenn es gezippt ist, aber immer noch, das ist viel CSS. Tailwind empfiehlt die Verwendung von PurgeCSS, und das hat Sarah getan. PurgeCSS kümmert sich nicht um all die Dinge, die ich erwähnt habe, wie Zustandsvariationen und JavaScript und dergleichen, aber es betrachtet alle statischen Dateien, die Sie möchten – sowohl Inhalte als auch CSS – und führt eine Analyse davon durch. Noch besser, Sarah wusste, dass sie einige Drittanbieter-Sachen hatte, und hat diese Situation speziell behandelt

PurgeCSS kann nicht erkennen, dass ich Selektoren wie .ais-Highlight behalten muss, da die Komponenten, die ihn verwenden, erst zur Laufzeit im DOM angezeigt werden.

Also hat sie einen Teil dieses CSS abgetrennt und die Konfiguration aktualisiert. Dann…

Mit dieser neuen Konfiguration ist meine endgültige CSS-Datei von 259 KB auf… 9 KB gesunken!

Ich liebe es. Das Tool verwenden, sich über das Geschehen auf Ihrer Website im Klaren sein und endgültige Entscheidungen für einen kombinierten Gewinn treffen.

Sarah erwähnt auch, wie dieses Konzept von ungenutztem CSS im Geiste mit dem Konzept von ungenutztem JavaScript verwandt ist. In JavaScript wird dies als Tree Shaking bezeichnet, und wie Jeremy Wagner es ausdrückt

Tree Shaking ist eine Form der Dead-Code-Eliminierung.

Ich vertraue den Tools für Tree Shaking viel impliziter. Dies sind Tools, die in JavaScript geschrieben sind, um JavaScript zu analysieren und JavaScript zu entdecken, das nicht verwendet wird. Es scheint, dass die Schnittmenge der Technologie nicht so groß ist, wenn wir über Tree Shaking sprechen. Dennoch könnte es Dinge wie konfigurierte Drittanbieter geben, die öffentliche Funktionen auf Ihrer Website aufrufen, oder Event-Handler direkt auf HTML-Elementen. Diese Dinge erscheinen mir heutzutage etwas seltener, aber das ist nur meine eigene Voreingenommenheit.