Aus Johnnys Dev-Blog
Die Herausforderung: Berechnen Sie den realen Prozentsatz von ungenutztem CSS
Unser Ziel ist es, ein Skript zu erstellen, das den Prozentsatz von ungenutztem CSS auf dieser Seite misst. Beachten Sie, dass der Benutzer mit der Seite interagieren und über die verschiedenen Tabs navigieren kann.
DevTools kann verwendet werden, um die Menge an ungenutztem CSS auf der Seite über den Coverage-Tab zu messen. Beachten Sie, dass der Prozentsatz an ungenutztem CSS nach dem Laden der Seite bei ~55% liegt, aber nach dem Klicken auf jeden der Tabs werden mehr CSS-Regeln angewendet und der Prozentsatz sinkt auf nur ~15%.
Deshalb bin ich so skeptisch gegenüber allem, was versucht, "ungenutztes CSS" zu messen. Dies ist eine unglaublich einfache Demo (alles, was sie tut, ist, auf ein paar Tabs zu klicken) und die Menge an ungenutztem CSS ändert sich dramatisch.
Wenn Sie nach genauen Daten suchen, wie viel ungenutztes CSS in Ihrer Codebasis vorhanden ist, auf automatisierte Weise, müssen Sie jede einzelne URL auf Ihrer Website besuchen und jedes mögliche Ereignis auf jedem Element auslösen und dies fortsetzen, bis sich die Dinge nicht mehr ändern. Dann tun Sie dies für jeden möglichen Zustand, in dem sich ein Benutzer befinden könnte – in jedem möglichen Browser.
Hier ist eine weitere unglaublich exotische Methode, von der ich gehört habe, wie es gemacht wird
- Warten Sie nach dem Laden der Seite eine zufällige Zeit lang
- Durchlaufen Sie alle Selektoren im CSSOM
- Wenden Sie einen `querySelector` darauf an und sehen Sie, ob er etwas findet oder nicht
- Melden Sie diese Ergebnisse an eine zentrale Datenbank zurück
- Führen Sie dies lange genug auf einer zufälligen Auswahl von Besuchern (oder allen Besuchern) aus, von der Sie sicher sind, dass sie eine solide Datenmenge darstellt, die überall auf Ihrer Website repräsentiert.
- Nehmen Sie Ihre Menge an Selektoren, die nie etwas gefunden haben, und fügen Sie ihnen ein winziges
1pxtransparentes GIF-Hintergrundbild hinzu - Führen Sie dieses modifizierte CSS für die gleiche Zeit aus
- Überprüfen Sie Ihre Serverprotokolle, um sicherzustellen, dass diese Bilder nie angefordert wurden. Wenn sie angefordert wurden, haben Sie sich geirrt, dass dieser Selektor ungenutzt ist, also entfernen Sie ihn aus der Liste
- Am Ende von all dem haben Sie eine Menge an Selektoren in Ihrem CSS, die sehr wahrscheinlich ungenutzt sind.
Clever, aber höchst unwahrscheinlich, dass jemand eine dieser Methoden auf konsistente und nützliche Weise verwendet.
Ich bin ein wenig beunruhigt über Tools wie Lighthouse, die behaupten, Ihr ungenutztes CSS zu prüfen und Sie auffordern, "ungenutzte Regeln aus Stylesheets zu entfernen, um unnötige Bytes zu reduzieren, die durch Netzwerkaktivität verbraucht werden." Die Wahrscheinlichkeit, dass jemand dies ausführt, dieses sogenannte ungenutzte CSS findet und es löscht, nur um dann festzustellen, dass es doch nicht wirklich ungenutzt war, scheint gefährlich hoch.