Unbenutzt

0
26

Ich habe vor kurzem Hier schrieb, ist die Sache mit “unused CSS” tools, wo ich versuchte, alle aufzuzählen, die Herausforderungen jedes Werkzeug müsste zu finden, die wirklich “unbenutzt” CSS. Die übergreifende Idee ist, dass CSS-Selektoren match-Elemente in den DOM, und die Elemente in den DOM kommen aus allen möglichen Orten: Ihre statischen templates, dynamische templates, basierend auf server-Seite Stand, und natürlich JavaScript kann das DOM manipulieren in irgendeiner Weise, einschließlich pull Dinge von APIs und Dritte.

Mit allen, die bei spielen, wie kann ein tool geben uns ein wirklich genaues Bild der ungenutzten CSS, bis zu dem Punkt, dass Sie tatsächlich zu entfernen, die CSS ist nicht nur so gefährlich, wie es verlassen allein?

Also sagte ich:

Und doch, ich glaube nicht, dass diese tools nutzlos sind — Sie sind einfach nur… – tools. Ihre Verwendung kann tatsächlich ein positiver Schritt in Richtung besseren code. Ihre Verwendung sagt, OK, ich gebe es zu, ich bin ein wenig Angst, unsere CSS. Sie könnten dieses tool nutzen, um sich ein breites Bild von dem, was Ihre ungenutzten CSS-könnte sein, dann kombinieren Sie, dass mit Ihrer eigenen Kenntnis des CSS-code-Basis, um fundiertere Entscheidungen treffen.

Ich stehe dazu, und es ist erwähnenswert, einige erfolgreiche Anwendungsfälle.

Sarah Dayan schrieb gerade, Wie ich fiel 250KB Toten CSS-Gewicht mit PurgeCSS. Sie war mit Rückenwind CSS, eine Atomare CSS-Bibliothek, die eine Menge Leute haben Erfolg mit hatte.

In meinem Fall habe ich nicht nur das laden der gesamten Rückenwind CSS-Bibliothek, aber ich habe auch mehrere Varianten, einige Module. Das endete damit, das Letzte minified CSS-Datei Gewicht 259 KB (vor GZip).

Es ist ein Zehntel dessen, wenn gzipped, aber immer noch, das ist eine Menge von CSS. Rückenwind empfiehlt die Verwendung PurgeCSS, und das ist, was Sarah Tat. PurgeCSS nicht behandeln alle Dinge, die ich erwähnt, wie Staat Variationen und JavaScript und so weiter, aber es sieht auf alle statischen Dateien, die Sie möchten, es zu—sowohl inhaltlich als auch CSS—und Analysen von denen. Noch besser, Sarah wusste, Sie hatte einige Drittanbieter-Zeug Los, so behandelt, dass die situation speziell:

PurgeCSS nicht erkennen kann, dass ich damit Selektoren wie .ais-Highlight, denn die Komponenten, die es verwenden, nur zeigen, bis in den DOM zur Laufzeit.

So Spalten Sie sich einige, dass CSS und aktualisiert die Konfiguration. Dann…

Mit dieser neuen Konfiguration, meine Letzte CSS-Datei hat sich von 259 KB…9 KB!

Ich Liebe es. Mit dem tool, super bewusst ist, was auf Ihrer Website passiert, und die letzten Entscheidungen für eine kombinierte Sieg.

Sarah auch erwähnt, wie dieses Konzept der ungenutzten CSS-Verwandte im Geiste auf das Konzept der nicht verwendete JavaScript. In JavaScript, es ist bezeichnet als Baum zu schütteln, und als Jeremy Wagner es ausdrückt:

Baum schütteln ist eine form der dead code elimination.

Ich vertraue darauf, die Werkzeuge für den Baum schütteln viel mehr implizit. Diese Werkzeuge sind in JavaScript geschrieben, um zu schauen, JavaScript -, um zu entdecken, dass JavaScript nicht verwendet. Es scheint, wie die Schnittstelle von Technik nicht so weit, wenn wir reden über Baum schütteln. Noch, es könnten Dinge sein wie konfiguriert Dritte, die öffentliche Funktionen auf Ihrer Website oder event-Handler, die direkt auf HTML-Elemente. Diese Dinge scheinen etwas seltener zu mir in diesen Tagen, aber das ist nur meine eigene Erfahrung bias.