Wie Entfernen Sie Unbenutzten CSS Von einer Website?

0
241

Hier ist, was ich möchte, dass Sie wissen im Voraus: dies ist ein hartes problem. Wenn Sie schon hier gelandet, weil Sie hoffen, deutete auf ein Werkzeug, das Sie ausführen können, die Ihnen genau sagt, was CSS kann man löschen aus dem Projekt, auch… gibt es tools gibt, aber ich warne Sie sehr vorsichtig sein mit Ihnen, weil keiner von Ihnen kann immer sagen, die ganze Geschichte.

Ich weiß, was Sie wollen. Möchten Sie das tool ausführen, löschen Sie, was es sagt Ihnen, und Sie haben eine schnellere Website in 2.2 Minuten. Tut mir Leid, aber ich bin dabei, Sie zu enttäuschen.

Ich denke, Sie sollten ein gesundes Maß an Skepsis bei jedem tool so. Keiner von Ihnen sind genau zu Ihnen liegen — Sie haben oft einfach nicht genügend Informationen, um Ihnen die Ergebnisse, die sicher und nachvollziehbar ist. Das ist nicht zu sagen, man kann Sie nicht benutzen oder Sie es nicht getan werden kann. Lass uns spazieren gehen.

Die motivation

Ich Stelle mir die #1-Treiber für den Wunsch, entfernen Sie nicht verwendete CSS ist:

Sie verwendet ein CSS-framework (z.B. Bootstrap), inklusive Rahmen die gesamte CSS-Datei, und Sie nur eine Handvoll Muster, die es bietet.

Ich kann nachempfinden, dass. CSS-frameworks oft nicht bieten einfache Möglichkeiten, um ein opt-in nur, was Sie verwenden und anpassen der Quelle zu arbeiten, die Art und Weise, erfordern möglicherweise einen know-how-level, dass Ihr team nicht haben. Das könnte sogar der Grund sein, Sie erreicht einen Rahmen, um mit zu beginnen.

Sagen, du bist be-100 KB von CSS. Ich würde sagen, dass ist eine Menge. (Wie ich Schreibe, diese Seite hat ~23 KB, und es sind ziemlich viele Seiten und Vorlagen. Ich glaube nicht, etwas besonderes tun, um die Größe zu reduzieren.) Sie haben einen Verdacht, oder einiges dafür, dass Sie sich nicht mit einem Teil dieser bytes. Ich kann sehen, dass die Ursache für den alarm. Wenn Sie hatte eine 100-KB-JPG, das könnte man komprimiert auf 20 KB durch fallenlassen auf ein tool, das ist genial und jeden Cent Wert. Aber der Gewinn dabei für CSS ist umso wichtiger, weil CSS wird geladen in der Kopf-und render-blocking. Das JPG nicht.

😬 Suche “Abdeckung”

Chrome DevTools hat eine “Abdeckung” – Registerkarte, wird Ihnen sagen, wie viel von Ihrer CSS-und JavaScript verwenden. Zum Beispiel, wenn ich auf der homepage von CSS-Tricks jetzt…

Es sagt mir, dass 70.7% mein Stil.css-Datei wird nicht verwendet. Ich kann mir vorstellen, es ist richtig, und dass der rest des CSS wird benutzt anderswo. Ich habe nicht nur dump eine große Stil-Bibliothek auf dieser Website; ich schrieb jede Zeile von hand, so dass ich meine Zweifel habe, dass mehr als 2/3 der es unbenutzt ist Global.

Ich nahm an, ich könnte beginnen, “Aufnahme”, dann klicken Sie auf, um verschiedene Bereiche der Website und sehen, dass nicht verwendete Nummer nach unten gehen, wie die verschiedenen Seiten mit verschiedenen HTML gerendert werden, aber wehe, wenn die Seite aktualisiert wurde, so hat die Berichterstattung tab. Es ist nicht sehr nützlich, immer eine multi-Seite schauen, CSS-Abdeckung, es sei denn, Sie haben eine Einzelne Seite App, die ich denke?

Ich hasse es zu sagen, aber ich finde der Blick auf die code-coverage-ziemlich nutzlos. Für mich, es Malt ein schreckliches Bild von all diesen ungenutzten Codes auf der Website, die Beute auf meine Zweifel, aber alles was ich tun kann, ist zu sorgen.

Dies könnte die Sache, die du auf die Idee, die ungenutzte CSS muss entdeckt werden und gelöscht in den ersten Platz.

Meine primäre Sorge

Meine größte Sorge ist, dass man sich an so etwas wie code-Abdeckung und sehen, Ihre ungenutzten Zeilen:

Und Sie gehen, Perfekt! Ich werde löschen, CSS! Und Sie tun, nur um herauszufinden, es war nicht ungenutzt, und Sie verursachte große styling-Probleme, die in der gesamten Website. Hier ist das Ding: Sie wissen eigentlich nicht, wenn ein CSS-Selektor wird nicht verwendet, es sei denn, Sie:

  1. überprüfen Sie die Abdeckung auf jeder einzelnen Seite der gesamten Website…
  2. während der Ausführung alle JavaScript…
  3. unter jede mögliche Kombination von Zustand…
  4. in der jede mögliche Kombination von Medien-Anfragen, die Sie verwendet haben.

Überprüfen Sie Ihre homepage nicht zählen. Überprüfen Sie alle Ihre top-level-Seiten nicht zählen. Du musst Graben Sie sich durch jede Seite, einschließlich der Zustände, die sind nicht immer top-of-mind, nicht zu schweigen von all den edge-case-Szenarien. Andernfalls könnten Sie am Ende löschen Sie die dropdown-styling für die Kreditkarte, die Auswahl in der dropdown-Liste der pop-up-modal angezeigt wird, für Benutzer mit einem deaktivierten Konto, angemeldet haben während Ihrer Karenzzeit, die haben auch einen Geschenk-Karte zu bewerben.

Das ist zu Komplex für automatisierte Werkzeuge entwickelt, um die Versprechen Ihren Ansatz funktioniert perfekt, vor allem, wenn factoring in den unbekannten browser-Kontext (unterschiedliche Bildschirmgrößen, verschiedene Fähigkeiten, verschiedene Browser) und Dritten.

Hier ist ein Beispiel für mein Anliegen spielt:

PurifyCSS Online dauert einige URLs und sofort bietet eine Kopie-pasteable Stück CSS verwenden

Hier ist mir fallen meine css-tricks.com in PurifyCSS Online und immer neue CSS.

Oooops!

Auf der linken Seite, CSS-Tricks, wie normal. Auf der rechten Seite habe ich das neue, “gereinigte” CSS, das gelöscht eine Reihe von CSS-erforderlich für die anderen Seiten.

Es gab mir die Möglichkeit zu geben, in anderen URLs (das ist schön), aber es gibt Zehntausende von URLs, die auf CSS-Tricks. Viele von Ihnen sind ziemlich ähnlich, aber alle von Ihnen haben das potential, mit Selektoren verwendet werden. Ich habe den Eindruck, es hat nicht JavaScript-Code ausführen, weil alles, was kam auf die Seite über JavaScript Links unstyled. Es auch gelöscht mein :hover Staaten.

Vielleicht können Sie sehen, warum mein Vertrauen in diese Werkzeuge so niedrig ist.

Teil eines build-Prozesses

PurifyCSS ist wohl mehr regelmäßig, verwendet als build-Prozess-tool eher als die online-Schnittstelle. Ihre docs Anweisungen für Grunt, Gulp, und webpack. Zum Beispiel, Platzhalter-Dateien zu überprüfen und zu verarbeiten:

var content = [‘**/src/js/*.js’, ‘**/src/html/*.html’];
var css = [‘**/src/css/*.css’];

var options = {
// Schreiben wird gereinigt CSS in diese Datei.
Ausgabe: ‘./dist/gereinigt.css’
};

reinigen(content, css, options);

Dies gibt Ihnen viel mehr Möglichkeiten für die Richtigkeit. Dass Inhalte von blob-könnte eine Liste von jeder einzelnen Vorlage -, Teil -, und JavaScript-Datei, die erstellt Ihre Website. Das kann ein Schmerz zu erhalten, aber Sie werden sicherlich bekommen mehr Genauigkeit. Es spielt keine Rechnung für Inhalte in Datenspeichern (z.B. dieses blog-post, der lebt in einer Datenbank) und third-party JavaScript, aber vielleicht ist Ihnen egal oder Sie kann es einige andere Weg.

PurgeCSS, einem Konkurrenten PurifyCSS warnt davor, seine Technik-Vergleich:

PurifyCSS funktioniert mit jedem Dateityp, nicht nur HTML oder JavaScript. PurifyCSS funktioniert durch die Suche auf alle Wörter in Ihren Dateien und vergleicht Sie mit den Selektoren in CSS. Jedes Wort wird als ein Selektor, was bedeutet, dass eine Menge von Selektoren können fälschlicherweise als verwendet betrachtet wird. Zum Beispiel, Sie möglicherweise zufällig auf ein Wort in einem Absatz entspricht ein Selektor in der CSS.

So man im Hinterkopf behalten, wie gut. Es ist dumm, in der Art, es vergleicht Potenzial Selektor zutrifft, ist sowohl klug und gefährlich.

UnusedCSS ist ein online-Dienst, der crawlt Ihre Website für Sie

Manuell konfigurieren ein Werkzeug zu betrachten, jede Seite auf Ihrer Website aus jedem Blickwinkel ist sicherlich eine lästige Pflicht und etwas, das müssen synchron gehalten werden Tag-zu-Tag, wie Sie Ihre Codebasis entwickelt. Interessanterweise hat der online-Dienst UnusedCSS versucht zu überwinden diese Belastung durch das Crawlen der Seite selbst basierte auf einer einzigen URL, die Sie ihm geben.

Ich habe mich für den kostenpflichtigen Dienst und wies es bei CSS-Tricks. Ich gebe zu, mit einem Blick auf die Ergebnisse, es fühlt sich viel genauer zu mir:

Es sagt mir, ich bin mit 93% meiner CSS, die fühlt sich mehr inline zu mir als hand-Autor von CSS auf dieser Seite.

Außerdem können Sie die download-gereinigt-Datei und bietet viele Anpassungsmöglichkeiten, wie aktivieren/deaktivieren-Selektoren, die Sie wirklich wollen/nicht wollen (z.B. Sie sehen, ein Klasse name, den es nicht denken, Sie brauchen, aber Sie wissen, für sicher, dass Sie tatsächlich tun, die es brauchen) sowie ein Präfix und entfernen von doppelten Auswahlen.

Ich genoss die erhöhte Genauigkeit der online-crawling-Dienst, aber es gab eine Menge Lärm, und ich kann auch nicht sehen, wie ich integrieren, die es praktisch in einem Tag-zu-Tag-build-und release-Prozess.

Tooling ist in der Regel verwendet post-processing

Sagen Sie Ihre CSS-mit Less oder Sass, dann verwendet einen Postprozessor, um es kompilieren zu CSS. Sie würde wahrscheinlich übernehmen automatisierte ungenutzte CSS-Reinigung am Ende von was auch immer andere CSS preprocessing Sie tun. Wie…

  1. Sass
  2. PostCSS / Autoprefixer
  3. [ Clean Unsued CSS ]
  4. Produktion CSS

Dass beides macht Sinn und ist etwas komisch für mich. Sie nicht wirklich fixieren das styling erzeugt, dass nicht verwendete CSS. Stattdessen werden Sie nur wischen Sie es Weg an das Ende der build. Ich nehme an, JavaScript zu tun diese Art der Sache mit dem Baum schütteln für eine Weile, also es ist ein Präzedenzfall, aber es fühlt sich immer noch komisch für mich, weil eine CSS-Code-Basis so direkt hands-on. Dieses setup fast ermutigt Sie, dump CSS, wohin, denn es gibt keine Strafe für das übertreiben. Es beseitigt jeden Anreiz zu verstehen, wie CSS angewendet und genutzt werden.

PurgeCSS ist ein weiteres tool, nimmt ausdrücklich zur Eingabe und gibt die Ergebnisse an

PurgeCSS ist ein weiterer Spieler in die unbenutzten CSS-Markt. Eine tangentiale, was ich mag über Sie ist, dass Sie deutlich erklärt, wie unterscheidet es sich von anderen Werkzeugen. Zum Beispiel im Vergleich zu PurifyCSS:

Der größte Fehler mit PurifyCSS ist seine fehlende Modularität. Dies ist jedoch auch seine größte Vorteil. PurifyCSS funktioniert mit jedem Dateityp, nicht nur HTML oder JavaScript. PurifyCSS funktioniert durch die Suche auf alle Wörter in Ihren Dateien und vergleicht Sie mit den Selektoren in CSS. Jedes Wort wird als ein Selektor, was bedeutet, dass eine Menge von Selektoren können fälschlicherweise als verwendet betrachtet wird. Zum Beispiel, Sie möglicherweise zufällig auf ein Wort in einem Absatz entspricht ein Selektor in der CSS.

PurgeCSS behebt dieses problem, indem Sie die Möglichkeit zum erstellen einer Dunstabzugshaube. Ein extractor ist eine Funktion, die den Inhalt einer Datei und extrahiert die Liste der CSS-Selektoren in der it. Es ermöglicht ein perfektes entfernen von unbenutzten CSS.

PurgeCSS scheint, wie der große Hund in dem moment. Viele Menschen sind, es zu benutzen und über Sie zu schreiben.

  • Nghia Pham schrieb darüber, wie es zu benutzen, die speziell mit Bootstrap,
  • Greg Kohn schrieb einen Beitrag Warnung, dass es nicht zu löschen-Selektoren in ungewöhnlichen Umständen mit whitelists.
  • Flavio Meistert schrieb über läuft es mit npm-Skripte und PostCSS.
  • Sarah Dayan gezielt details, wie es funktioniert mit Rückenwind.

Trotz PurgeCSS benötigen eine Besondere Konfiguration zu arbeiten, mit Rückenwind, wie es scheint, Rückenwind und PurgeCSS sind zwei Erbsen in einer schote. In der Tat, Ihre docs empfehlen, mit Ihnen zusammen und bietet eine CLI für die Verwendung in einem build-Prozess.

Ich glaube, das wesentliche ist dieses: Rückenwind produziert dieses große CSS-Datei voller utility-Selektoren. Aber Sie wollen nicht, um Ihnen die ganze Sache. Verwenden Sie diese utility-Selektoren-in HTML zu tun, alle Ihre styling, dann verwenden Sie PurgeCSS zu betrachten, alle Ihre HTML und schütteln Sie das utility nicht verwendete Selektoren in Ihrer Produktion zu CSS.

Noch, es wird eine laufende Wartung Problem es zu lehren, über jede einzelne Vorlage auf Ihrer Website — JavaScript -, HTML -, oder sonst — bei der manuellen Konfiguration irgendwas, stützt sich auf Drittanbieter-Ressourcen und das wissen, dass alle Daten, die von einem Daten-store wahrscheinlich nicht angeschaut während Sie einen build-Prozess, so dass es etwas zu berücksichtigen, für manuell.

Meine Lieblings-Technik: haben Sie jemanden, der wirklich vertraut mit CSS-Codebasis werden sich des Problems bewusst und Ziel, um es zu beheben im Laufe der Zeit

Vielleicht fühlt sich an wie der Ansatz von einem alten Hasen, der muss mit der Zeit zu bekommen, aber hey, das fühlt sich einfach wie die meisten praktischen Ansatz für mich. Da dieses problem ist so schwer, ich denke, dass harte Arbeit ist, die Antwort darauf. Es versteht das problem und arbeiten an einer Lösung über die Zeit. Ein front-end-Entwickler, der sehr eng eingebunden in Ihren front-end wird ein Verständnis über das, was verwendet wird und usused in CSS-land nach Zeit und können schnitzen Sie es nach unten.

Eine extreme testing-Ansatz, den ich gesehen habe, ist mit einem (also background-image: url(/ist-das-wird-verwendet.gif?selector);) in der CSS-block und dann die überprüfung von server-Protokollen im Laufe der Zeit zu sehen, wenn das Bild zugegriffen wurde. Wenn es zugegriffen wird, verwendet wurde; wenn nicht, war es nicht.

Aber vielleicht ist mein Lieblings-tool in der Potenzial-toolbox ist:

Visual regression testing

Sie Abbildung wie viel von Ihrer Website wie möglich — wie alle wichtigen Seiten und diese Seiten manipuliert in verschiedenen Staaten — plus in unterschiedlichen Browsern und Bildschirmgrößen. Diese screenshots sind erstellt aus deinen master branch auf Git.

Dann, vor abzweigungen wird zusammengeführt, Master, nehmen Sie alle diese screenshots sind von Ihnen und Vergleiche Sie mit den screenshots in den master. Nicht manuell, sondern programmgesteuert.

Das ist genau das, was Percy nicht, so sehen Sie dieses:

Es gab auch noch andere ersticht in visual regression testing-tools über die Jahre, aber Percy ist der einzige, den ich gesehen habe, dass macht klar Sinn für mich. Ich weiß nicht nur, screenshots zu machen; ich will, dass Sie im Vergleich damit ich sehen kann, die optischen Unterschiede zwischen Ihnen. Ich will nicht nur um die Unterschiede zu sehen; ich will zu genehmigen oder missbilligen Sie. Ich möchte auch, dass die Zustimmung zu blockieren oder zu erlauben verschmilzt und ich möchte in der Lage sein, Steuern Sie den browser, bevor der screenshot gemacht wird. Ich will nicht manuell aktualisieren Sie die Vergleich-Bilder. Das ist alles Brot-und-butter-Percy Zeug.

Vollständige Offenlegung: Percy gesponsert hat die Dinge hier auf CSS-Tricks hier vor — inklusive video oben — aber nicht in diesem post.

Die Beziehung zu Atomaren und CSS-CSS-in-JS

Ich bin sicher, es gibt viele Leute, die dies Lesen, die sagen würde: ich habe nicht die unbenutzten CSS, weil die Werkzeuge, die ich verwenden, generiert die genauen CSS, die es braucht, und nichts mehr.

Hey, das ist echt cool.

Vielleicht ist das der Zerstäuber. Vielleicht, dass die Tachyonen, die Sie auch ausführen, durch UnCSS und Sie sind super vorsichtig. Vielleicht ist es der Rückenwind + PurgeCSS combo, die all die Wut jetzt.

Vielleicht haben Sie angehen Stile auf eine andere Weise. Wenn Sie eng Kopplung JavaScript-Komponenten und Stile, wie Sie Reagieren und Emotion, oder sogar nur mit CSS-Modulen mit was auch immer, weniger nicht verwendete CSS ist ein Vorteil von CSS-in-JS. Und weil Baum-schütteln und code-Teilungs-komm mit auf die Reise in viele JavaScript-basierten build-Prozesse, Sie haben nicht nur weniger CSS, aber nur laden, was Sie im moment brauchen. Gibt es Nachteile für alle, obwohl dies.

Wie vermeiden Sie ungenutzte CSS-zukünftige Projekte?

Ich denke, die Zukunft von styling ist eine absichtliche Aufteilung zwischen globalen und komponentenbasierte Stile. Die meisten Arten stammen aus dem Bereich Komponenten, aber es gibt global styling-Entscheidungen, die gemacht werden, die klaren Vorteile der cascade (z.B. Globale Typografie defaults).

Wenn die meisten styling ist Links bezieht sich auf Komponenten, ich denke, es gibt weniger Möglichkeit, für nicht verwendete Stile zu bauen, da es viel einfacher zu wickeln Ihre Meinung rund um einen kleinen block von HTML und ein kleiner block von CSS, die in direktem Zusammenhang zu einander. Und wenn die Komponenten sterben oder sich entwickeln, die styling stirbt oder entwickelt sich mit ihm. CSS-bundles bestehen aus Komponenten, die tatsächlich genutzt werden.

CSS-in-JS-Lösungen natürlich den Kopf in diese Richtung als Stile an Komponenten gebunden. Das ist der wichtigste Punkt, wirklich. Aber es ist nicht notwendig. Ich mag den generischen Ansatz des CSS-Module, das ist so ziemlich komplett für Stil scoping und nicht vorschreiben, dass Sie eine bestimmte JavaScript-framework.

Wenn all das scheint theoretischen oder heraus-von-erreichen, und Sie müssen nur eine Bootstrap-Website, wo Sie versuchen, die Größe zu reduzieren, daß sich alle Bootstrap-CSS -, würde ich empfehlen, ab durch die Verwendung von Bootstrap-von der Quelle statt der endgültigen Standard-distributed-bundle. Die Quelle ist SCSS und gebaut von einer Reihe von high-level schließt, so dass, wenn Sie nicht brauchen, insbesondere Teile von Bootstrap, können Sie Sie entfernen.

Entfernen dropdowns, Abzeichen und Paniermehl von Bootstrap vor dem bauen.

Viel Glück da draußen, gang.