Hier ist das Ding über “unused CSS” tools

0
37

Es gibt eine Menge von tools, die helfen sollen, entfernen Sie “nicht verwendete CSS” von Ihrem Projekt. Nie eine Woche vergeht, sehe ich nicht ein tool für diese freigegeben oder gefördert. Es muss Streik eine Art perfekte Akkord für einige Entwickler. Ich Sorge mich über die Leistung, und ich weiß, dass die Verringerung der Dateigrößen ist gut für die Leistung. In der Tat, es ist. Ich Wette, wir haben CSS, die ungenutzt in unseren stylesheets, wenn wir uns entfernt, das ist eine Leistung gewinnen. Yep, es wäre. Wir sollten automatisieren. Ehhhhhh, ich bin mir nicht so sicher.

Gibt es große performance tooling Spieler, die spielen, bis diese Idee, wie Leuchtturm und wie es Sie gibt die CSS-und JS – “Abdeckung”, der wird sicherlich sagen, dass man den Versand-code, den Sie brauchen nicht zu sein.

Die tools, die behaupten, Ihnen zu helfen mit ungenutzten CSS haben, um eine Analyse durchführen zu können, Ihnen zu sagen, was nicht benutzt ist und was nicht.

Hier ist ein Weg, zu tun, die Analyse. Rendern Sie eine Seite von Ihrer Website und erhalten Sie die komplette DOM. Dann Holen Sie sich die komplette CSSOM sowie, die kann, geben Sie ein array von Selektoren in CSS. Loop über diese Selektoren und eine querySelector in den DOM und sehen, ob es passt nichts. Wenn es nicht, dass CSS-Selektor ist unbenutzt.

Clever, richtig?!

Ich denke, so. Aber, dass die Analyse zeichnet ein eher begrenztes Bild.

Sagen, dass die Analyse läuft zwei Sekunden, nachdem die Seite vollständig ist, aber es gibt einige JavaScript läuft und spritzt ein modales nach fünf Sekunden (ughghk, ich weiß). Die Analyse würde übersehen haben, die die HTML-modalen, die wahrscheinlich Stilen, und damit hätten falsch berichtet, diese Stile als unbenutzt.

Ja, timing ist ein Faktor. Hoffentlich, dieses Analyse-tool hat einige Weise konfigurieren Sie mehrere timings.

Wir sind auch nur auf der Suche an einer Seite so weit. Natürlich, eine Website, die möglicherweise Dutzende, Hunderte oder Tausende von Seiten. Um ganz sicher zu gehen über nicht verwendete Stile, die sich mit allen von Ihnen ist die sicherste Wette.

Mehrere Seiten ist ein weiterer Faktor. Hoffentlich ein Analyse-tool, das eine Möglichkeit hat, zu schauen, wie viele Seiten, wie Sie sagen, es zu. Vielleicht ist es eine sitemap?

Denken Sie daran, die timing-Sache? Wir denken, dass das timing als eine generische form des Staates. Es gibt unzählige andere Dinge, die sein könnte, state related. Ist der Benutzer eingeloggt ist oder nicht? Was planen Sie? Ist Ihre Kreditkarte abgelaufen ist, und zeigt so eine Art von Besondere Nachricht? Tun, situative Dinge wie Zeit/Datum/geolocation-Status ändern? Was ist mit real-time Daten? Zeug von einer API?

Application-level-Zustand ist eindeutig ein großer Faktor. Hoffentlich, das Analyse-tool kann der Auslöser/set aller möglichen Kombinationen des Staates.

Es ist interaktiv Zustand als gut. Was modals, weil etwas angeklickt wird? Was ist die aktive Registerkarte? Ist das Menü offen oder geschlossen? Was die scroll-position sind Sie? Es gibt unendlich viele Permutationen von diesen. Stellen Sie sich eine Warnung Balken, der anzeigt, bis sieben Sekunden, nachdem der Benutzer sich anmeldet, um Benutzer zu warnen, über Ihre abgelaufene Kreditkarte, die enthält eine benutzerdefinierte Stil wählen Sie im Menü kann in einem offenen oder geschlossenen Zustand, aber nur auf der Benutzer-Einstellungen-Seite.

Es scheint unwahrscheinlich, dass dieses Analyse-tool ist in der Lage alle diese Möglichkeiten. Auch mit Lasten, Konfiguration, mock Staat und integration-Tests, es konnte nicht decken die nahezu unendliche variations-für all dies.

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. Oder nehmen Sie einen anderen technologischen Schritt zu tun und so etwas wie ein Hintergrundbild hinzufügen, um diese ungenutzte Selektoren, und überprüfen Sie server-logs, um zu sehen, wenn Sie sich treffen.

Es sollte gesagt werden, dass diese ganze Idee nicht verwendete CSS ist ein Teil des CSS-JS-saga, dass unsere Branche durchläuft. Wenn alle Ihre Stile geschrieben werden, die als Teil der Komponenten, gibt es irgendwie keine ungenutzte CSS-Dateien. Entweder ist die Komponente verwendet wird und die Stile, mit ihm zu kommen, oder es funktioniert nicht. Wenn Sie besonders sensible, über die Gefahr der ungenutzten CSS, das allein könnte sway Sie in Richtung einer CSS-JS-tool.

Es sollte auch gesagt werden, dass dieser DOM-und CSSOM-Analyse-Technik ist nur eine Möglichkeit der überprüfung auf nicht verwendete Stile. Wenn Sie hatte eine Art von Phantasie-Tools, die analysieren könnte, alle Ihre templates, styles und scripts, vermutlich das feststellen konnte, nicht verwendete Stile als gut. Wir reden darüber, dass in den letzten ShopTalk Show episode mit Chris Eppstein.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!