Wie werden Sie nicht verwendeten CSS-Code los? Teil 1

Der Autor des Artikels, dessen erster Teil der Übersetzung wir heute veröffentlichen, möchte den Lesern vorab mitteilen, dass es eine schwierige Aufgabe ist, unnötiges CSS loszuwerden. Wenn Sie dies in der Hoffnung lesen, ein Tool zu finden, das ausgeführt wird, können Sie genau herausfinden, welcher CSS-Code sicher aus Ihrem Projekt entfernt werden kann. Es gibt ähnliche Tools, aber sie müssen sehr vorsichtig verwendet werden, da keines von ihnen Ich kann die Frage nach nicht verwendetem CSS nicht anständig beantworten.



Es ist leicht zu verstehen, dass jeder Webentwickler ein Dienstprogramm verwenden, es ausführen und das unnötige CSS entfernen möchte, über das berichtet wird. Ein paar Minuten - und die Seite wird beschleunigt. Aber nicht so einfach. Der Autor dieses Materials ist der Ansicht, dass ein solches Werkzeug mit gesunder Skepsis behandelt werden sollte. Keiner von ihnen lügt den Entwickler an. Diese Tools verfügen in der Regel nicht über genügend Informationen, um Ergebnisse zu erzielen, denen bedingungslos vertraut werden kann. Dies bedeutet jedoch nicht, dass solche Tools nicht verwendet werden können. Dies bedeutet nicht, dass Sie nicht verwendetes CSS in keiner Weise entfernen können. Wir diskutieren das.

→ Lesen Sie den zweiten Teil

Warum nicht verwendetes CSS loswerden?

Ich glaube, dass der Hauptgrund, warum jemand ungenutztes CSS loswerden muss, anhand des folgenden Beispiels beschrieben werden kann. Angenommen, Sie verwenden ein CSS-Framework (wie Bootstrap) und der gesamte CSS-Code für dieses Framework wird in Ihr Projekt übernommen. In der Realität wird nur ein kleiner Teil dieses Codes im Projekt verwendet. Wie alles unnötige loswerden?

Ich kann die Gefühle von jemandem fühlen, der sich in einer ähnlichen Situation befindet. CSS-Frameworks bieten Entwicklern häufig keine einfachen Möglichkeiten, genau die Funktionen auszuwählen, die für bestimmte Projekte gelten. Um den Quellcode des Frameworks in einen Zustand zu versetzen, der idealerweise einem bestimmten Projekt entspricht, ist möglicherweise ein Team mit einem Erfahrungsniveau erforderlich, über das es möglicherweise nicht verfügt. Eine ähnliche Situation an sich kann der Grund für die Suche nach dem Framework werden.

Angenommen, Sie laden 100 KB CSS herunter. Ich würde sagen, das ist viel. (Im Moment, in dem ich dies schreibe, verwendet css-tricks.com ungefähr 23 KB CSS. Es gibt eine ganze Reihe von Seiten und Vorlagen. Ich habe nichts Besonderes getan, um die Größe von CSS zu reduzieren.) Es besteht der Verdacht, dass Sie einen Teil dieser Codemenge nicht verwenden. Und vielleicht finden Sie Beweise dafür. Ich sehe einen Grund, den Alarm auszulösen. Wenn Sie eine 100-KB-JPG-Datei haben, die durch Verarbeiten mit einem Tool auf 20 KB komprimiert werden kann, ist dies großartig und lohnenswert. Aber wenn so etwas mit CSS gemacht wird, dann ist das viel wichtiger. Der Punkt ist, dass CSS am Anfang des Ladens der Seite geladen wird und eine Ressource ist, die das Rendern blockiert. JPG-Dateien sind keine solchen Ressourcen.

Situationsanalyse mit Chrome Developer Tools

Das Chrome Developer Tools-Fenster verfügt über eine Registerkarte " Coverage . Mit seiner Hilfe können Sie herausfinden, wie viel geladenes CSS und JavaScript tatsächlich auf der analysierten Seite verwendet werden. Zum Beispiel bin ich jetzt zu css-tricks.com gegangen. Unten ist das, was ich auf der Registerkarte Coverage .


Chrome Developer Tools, Registerkarte "Abdeckung"

Hier sehe ich, dass 70,7% meiner style.css Datei nicht verwendet werden. Ich denke, dass daran nichts auszusetzen ist. Der verbleibende nicht verwendete Teil von CSS wird auf einigen anderen Seiten der Site verwendet. Auf dieser Seite verwende ich keine große Stilbibliothek. Ich selbst habe jede CSS-Zeile geschrieben, daher bezweifle ich, dass 2/3 der CSS-Zeilen weltweit nicht korrekt sind.

Ich bin davon ausgegangen, dass Sie beim Arbeiten mit der Registerkarte " Coverage " mit dem Aufzeichnen beginnen und auf der Website herumwandern können, um zu beobachten, wie der Prozentsatz nicht verwendeter Ressourcen sinkt, wenn verschiedene Seiten im Browser angezeigt werden. Leider wird beim Aktualisieren der Seite auch der Inhalt der Registerkarte Coverage aktualisiert. Infolgedessen ist dieses Tool nicht besonders nützlich, um den Prozentsatz der Ressourcennutzung auf mehreren Seiten zu bestimmen. Dies ist möglicherweise nicht nur dann der Fall, wenn Sie eine einseitige Bewerbung analysieren.

Es ist für mich unangenehm, dies zu sagen, aber die Analyse der Website mithilfe des Tabs " Coverage sich als nahezu sinnlos erwiesen. Was ich gesehen habe, diese 70,7%, ist ein schreckliches Bild, das meinen Zweifeln widerspricht, aber diese Analyse gibt mir nichts Konkretes, so dass ich mich nur um etwas Sorgen machen kann, das auf meiner Website nicht stimmt.

Vielleicht ist diese Analyse der Site der eigentliche Mechanismus, der Sie auf die Idee bringt, dass Sie CSS-Code finden und entfernen müssen, der geladen wird, aber in Ihrem Projekt nicht verwendet wird.

Mein primäres Problem

Beim Finden und Entfernen von nicht verwendetem CSS geht mich Folgendes am meisten an. Angenommen, jemand sieht sich die Analyseergebnisse an und sieht nicht verwendete CSS-Fragmente.


Unbenutzte CSS-Schnipsel

Er denkt: "Gut, alles Unnötige löschen!" Das Überflüssige wird gelöscht, und dann stellt sich heraus, dass es überhaupt nicht überflüssig war und dass das Entfernen zu großen Problemen beim Stylen der gesamten Site führte. Hier ist die Sache: Sie können völlig sicher sein, dass einige CSS-Selektoren nicht verwendet werden, nur wenn Sie sich mit dem folgenden Plan befassen:

1. Sie müssen jede Seite der Site mit einem Tool wie der Registerkarte " Coverage überprüfen.
2. In diesem Fall müssen Sie den gesamten JavaScript-Code ausführen.
3. Dies muss mit allen möglichen Optionen für den Status der Anwendung erfolgen.
4. Darüber hinaus müssen Sie all dies mit allen möglichen Optionen für die verwendeten Medienabfragen überprüfen.

Wenn nur die Homepage der Website überprüft wird, wird dies nicht berücksichtigt. Das Studium aller Top-Level-Seiten wird ebenfalls nicht als echter Test angesehen. Sie müssen alle Seiten durchgehen, die Site in Situationen untersuchen, an die sich der Entwickler möglicherweise nicht sofort erinnert, und alle Grenzfälle überprüfen. Andernfalls kann alles mit dem Entfernen des Stils in der Dropdown-Liste der Kreditkarten im Popup-Fenster für Benutzer mit einem deaktivierten Konto enden, die sich während der Nachfrist für die Zahlung eines neuen Abonnements beim System anmelden und gleichzeitig über eine gültige Geschenkkarte verfügen.

So etwas ist für automatisierte CSS-Parser zu kompliziert. Sie sind nicht in der Lage, solche Überprüfungen perfekt durchzuführen, insbesondere angesichts der Analyse des Standorts in einer Situation der Unsicherheit. Wir sprechen zum Beispiel über die Untersuchung von Projekten in verschiedenen Browserkontexten (verschiedene Bildschirmgrößen, verschiedene Browserfunktionen, verschiedene Browser) und die Berücksichtigung der Auswirkungen von Bibliotheken von Drittanbietern auf die Website.

Und jetzt möchte ich ein Beispiel zeigen, wie all die Probleme, über die ich gerade gesprochen habe, in der Praxis aussehen.

PurifyCSS Online

Ich habe mich entschlossen, css-tricks.com mithilfe der PurifyCSS Online- Ressource zu optimieren. Sie können Links darauf übergeben und es wird sofort einsatzbereites CSS erstellt. Ich habe css-tricks.com für diese Site "gefüttert" und ich hatte einen neuen CSS-Code zur Verfügung. Dies ist passiert, nachdem ich diesen Code verwendet habe.


Links ist die übliche Ansicht von css-tricks.com. Auf der rechten Seite sehen Sie das Ergebnis der Anwendung von neuem, "verfeinertem" CSS. In diesem neuen Code fehlte viel von dem, was für verschiedene Seiten der Site benötigt wird

Mit PurifyCSS können Sie anhand vieler Links analysieren (was sehr schön ist), aber auf css-tricks.com gibt es Zehntausende von Links. Viele von ihnen führen zu ähnlichen, in Bezug auf CSS, Seiten, aber auf jeder dieser Seiten kann es etwas geben, das anderswo nicht verwendet wird. Außerdem hatte ich das Gefühl, dass PurifyCSS keinen JS-Code ausführte, da sich nach dem „Bereinigen“ meines CSS alles, was auf den Seiten mit JavaScript angezeigt wurde, als nicht mehr gestylt herausstellte. Sogar die Stile für die Pseudoklassen :hover .

Wahrscheinlich habe ich bereits genug gesagt, um Ihnen klar zu machen, dass es kein Zufall ist, dass ich solchen Tools so wenig vertraue.

Bereinigen Sie CSS mit PurifyCSS als Teil des Projekterstellungsprozesses

PurifyCSS wird wahrscheinlich häufiger als Tool zum Erstellen eines Projekts verwendet als als Online-CSS-Cleaner. Die Projektdokumentation enthält Anweisungen zur Verwendung von Grunt, Gulp und Webpack. So verarbeiten Sie beispielsweise Dateien nach Vorlagen:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

Dieser Ansatz ermöglicht eine viel größere Genauigkeit. Die Materialien der Website, die zur Analyse übermittelt werden, können eine Liste sein, die jede Vorlage, jedes Fragment, das zum Erstellen von Seiten verwendet wird, und jede JavaScript-Datei enthält. Es mag sich herausstellen, dass eine solche Liste von Ressourcen nicht einfach zu pflegen ist, aber Sie können alles berücksichtigen, was berücksichtigt werden kann. Dies gilt jedoch nicht für den Inhalt von Seiten, die sich in bestimmten Repositorys befinden (z. B. Blog-Posts, die in der Datenbank gespeichert sind), und für JavaScript-Code von Drittanbietern. In einigen Fällen ist dies jedoch unwichtig oder sogar unwichtig Der Entwickler wird in der Lage sein, die CSS-Anforderungen solcher Ressourcen zu berücksichtigen.

Dokumentation zu PurifyCSS-Konkurrenten PurgeCSS enthält eine Warnung bezüglich der von PurifyCSS verwendeten Ressourcenbehandlungsmethode. Wir sprechen nämlich von der Tatsache, dass PurifyCSS mit Ressourcen jeglicher Art und nicht nur mit HTML und JavaScript arbeiten kann. PurifyCSS analysiert im Laufe der Arbeit alle Wörter in Dateien und vergleicht sie mit Selektoren im CSS-Code. Jedes Wort wird als Selektor betrachtet. Das heißt, viele Selektoren werden möglicherweise fälschlicherweise als auf der Site verwendet erkannt. Beispielsweise kann es im Textinhalt einer Datei in einem regulären Satz ein Wort geben, das einem bestimmten CSS-Selektor entspricht.

Es lohnt sich, sich an PurifyCSS zu erinnern. Dieses Tool sucht mithilfe eines extrem einfachen Algorithmus nach CSS-Selektoren in den Site-Materialien. Dies ist einerseits eine vernünftige Idee und andererseits ziemlich gefährlich.

Unbenutzter CSS-Dienst

Natürlich ist die manuelle Abstimmung eines Werkzeugs, das so durchgeführt wird, dass dieses Werkzeug jede Seite analysiert, so dass er sie aus allen möglichen Gesichtspunkten untersucht, eine langweilige Routine. Darüber hinaus sollten solche Arbeiten täglich durchgeführt werden, da die analysierten Informationen über den Standort im Verlauf des Projekts mit neuen Daten aktualisiert werden sollten. Es gibt einen Onlinedienst namens UnusedCSS . Er umgeht die Seiten der Site unabhängig voneinander und erspart dem Entwickler so viel monotone Arbeit. Dieser Service reicht aus, um einen einzelnen Link auf die Site zu übertragen.

Ich habe mich für ein kostenpflichtiges Abonnement dieses Dienstes angemeldet und css-tricks.com damit analysiert. Ich muss zugeben, dass ich nach dem Betrachten der Ergebnisse das Gefühl hatte, dass sie viel genauer aussahen als das, was ich zuvor gesehen hatte.


Analysieren Sie css-tricks.com mit UnusedCSS. Der Bericht besagt, dass die Site 93% des geladenen CSS-Codes verwendet. Es scheint mir der Wahrheit nahe zu sein, da ich den gesamten CSS-Code für diese Site manuell geschrieben habe

Mit dem Dienst können Sie außerdem eine Datei mit gelöschtem CSS-Code herunterladen und den Inhalt dieser Datei verwalten. Dies ist beispielsweise das Aktivieren und Deaktivieren von Selektoren, die der Entwickler dem CSS-Code hinzufügen möchte oder nicht möchte. Angenommen, ein Entwickler sieht einen Klassennamen, der laut UnusedCSS auf der Site nicht benötigt wird, aber der Entwickler weiß, dass er auf diesen Klassennamen nicht verzichten kann. Infolgedessen kann der fälschlicherweise als unnötig erkannte Code als notwendig markiert werden. Weitere Funktionen von UnusedCSS sind das Arbeiten mit Präfixen und das Entfernen doppelter Selektoren.

Die Tatsache, dass UnusedCSS mir viel genauere Ergebnisse lieferte als andere Tools, hat mir sehr gut gefallen. Die von diesem Dienst generierten Daten enthalten jedoch zu viele Störsignale. Außerdem weiß ich noch nicht, wie UnusedCSS in den regelmäßig wiederholten Prozess der Erstellung eines Projekts und der Inbetriebnahme seiner neuen Versionen einbezogen werden kann.

→ Lesen Sie den zweiten Teil

Sehr geehrte Leser! Sind Sie auf das Problem gestoßen, nicht verwendeten CSS-Code in Ihren Projekten zu haben?