Wie entfernen Sie ungenutzte CSS von einer Website?

Folgendes möchte ich, dass Sie im Voraus wissen: Dies ist ein schwieriges Problem. Wenn Sie hier gelandet sind, weil Sie hoffen, auf ein Tool ausgerichtet zu sein, das Sie ausführen können, mit dem Sie genau sagen können, welche CSS Sie aus Ihrem Projekt löschen können, gibt es dort draußen Tools, aber ich warne Sie davor, mit ihnen sehr vorsichtig zu sein, weil keiner von ihnen Ihnen jemals die vollständige Geschichte erzählen kann.

Ich weiß, was du willst. Sie möchten das Tool ausführen, löschen, was es Ihnen sagt, und Sie haben in 2,2 Minuten eine schnellere Site. Es tut mir leid, aber ich werde dich enttäuschen.

Ich denke, Sie sollten ein gesundes Maß an Skepsis gegenüber einem solchen Tool haben. Keiner von ihnen lügen Sie genau an - sie haben oft nicht genügend Informationen, um Ihnen Ergebnisse zu erzielen, die sicher und umsetzbar sind. Das heißt nicht, dass Sie sie nicht benutzen können oder es kann nicht getan werden. Lass uns einen Spaziergang machen.

Die Motivation

Ich stelle mir vor, der Nr. 1 -Treiber nach dem Wunsch, nicht verwendete CSS zu entfernen, lautet:

Sie haben ein CSS -Framework (z. B. Bootstrap) verwendet, die gesamte CSS -Datei des Frameworks enthalten und nur eine Handvoll der von ihnen bereitgestellten Muster verwendet.

Ich kann mich damit einfühlen. CSS-Frameworks bieten häufig keine einfachen Möglichkeiten, sich nur für das zu entscheiden, was Sie verwenden, und das Anpassen der Quelle an die Arbeit auf diese Weise erfordert möglicherweise ein Maß an Fachwissen, das Ihr Team nicht hat. Das könnte sogar der Grund sein, warum Sie nach einem Rahmen gegriffen haben.

Sagen Sie, Sie laden 100 KB CSS. Ich würde sagen, das ist viel. (Wie ich schreibe, hat diese Seite ~ 23 KB und es gibt ziemlich viele Seiten und Vorlagen. Ich mache nichts Besonderes, um die Größe zu reduzieren.) Sie haben einen Verdacht oder einige Beweise dafür, dass Sie keinen Teil dieser Bytes verwenden. Ich kann die Ursache für Alarm sehen. Wenn Sie eine 100 -KB -JPG hätten, die Sie auf 20 KB komprimieren könnten, indem Sie es auf ein Tool fallen lassen, ist das großartig und es wert. Aber der Gewinn darin, dies für CSS zu tun, ist noch wichtiger, da CSS in den Kopf geladen ist und das Blockieren macht . Das JPG ist nicht.

? Betrachten Sie "Berichterstattung"

Chrome's Devtools hat eine Registerkarte "Berichterstattung", die Ihnen zeigt, wie viel von Ihrem CSS und JavaScript verwendet wird. Zum Beispiel, wenn ich gerade die Homepage von CSS-Tricks besuche ...

Es sagt mir, dass 70,7% meiner Style.css -Datei nicht genutzt sind. Ich stelle mir vor, dass es richtig ist und dass der Rest des CSS an anderer Stelle verwendet wird. Ich habe nicht nur eine große Stilbibliothek auf diese Seite abgelegt. Ich habe jede Zeile davon von Hand geschrieben, also habe ich meine Zweifel daran, dass mehr als 2/3 weltweit ungenutzt sind.

Ich nahm an, dass ich mit dem „Aufnehmen“ beginnen und auf verschiedene Bereiche der Website klicken und beobachten könnte, wie die nicht verwendete Nummer als verschiedene Seiten mit unterschiedlichen HTML gerendert wird, aber leider, wenn die Seite aktualisiert wird, und die Registerkarte Abdeckung. Es ist nicht sehr nützlich, einen mehrseitigen Blick auf die CSS-Berichterstattung zu erhalten, es sei denn, Sie haben eine einseitige App, denke ich?

Ich hasse es, es zu sagen, aber ich finde es ziemlich nutzlos, die Code -Berichterstattung zu betrachten. Für mich zeichnet es ein schlechtes Bild von all diesen nicht verwendeten Code auf der Website, was meine Zweifel vorbereitet, aber alles, was ich tun kann, ist, sich darüber Sorgen zu machen.

Dies könnte genau das sein, was Ihnen die Idee hat, dass nicht genutzte CSS überhaupt entdeckt und gelöscht werden muss.

Mein Hauptanliegen

Meine größte Sorge ist, dass Sie sich so etwas wie Code -Berichterstattung ansehen und Ihre unbenutzten Zeilen sehen:

Und du gehst, perfekt! Ich werde das CSS löschen! Und Sie tun nur, um herauszufinden, dass es überhaupt nicht ungenutzt wurde und Sie auf der gesamten Website große Stylingprobleme verursacht haben. Hier ist die Sache: Sie wissen nicht, ob ein CSS -Selektor nicht genutzt ist, es sei denn, Sie:

1. Überprüfen Sie die Berichterstattung auf jeder einzelnen Seite Ihrer gesamten Website…
2. Während der Ausführung aller JavaScript…
3. Unter jeder möglichen Kombination von Staat…
4. In jeder möglichen Kombination von Medienfragen, die Sie verwendet haben.

Das Überprüfen Ihrer Homepage zählt nicht. Wenn Sie alle Seiten der obersten Ebene überprüfen, zählt nicht. Sie müssen jede Seite durchgehen, einschließlich Zuständen, die nicht immer erstklassig sind, ganz zu schweigen von allen Kanten-Case-Szenarien. Andernfalls können Sie das Dropdown-Styling für die Dropdown-Liste der Kreditkarte im Popup-Modal löschen, die für Benutzer mit einem behinderten Konto angezeigt wird, das sich während ihres Gnadenfrists angemeldet hat, auf dem sich auch eine Geschenkkarte bewerben kann.

Dies ist zu komplex für automatisierte Werkzeuge, um zu versprechen, dass ihr Ansatz perfekt funktioniert, insbesondere wenn sie in den Unbekannten des Browserkontexts (verschiedene Bildschirmgrößen, unterschiedliche Funktionen, verschiedene Browser) und Dritte berücksichtigt werden.

Hier ist ein Beispiel für meine Besorgnis:

PurifyCSSS online nimmt einige URLs und bietet sofort einen kopierbaren CSS-Stück zur Verwendung

Hier werde ich meine css-tricks.com in PurifyCSS online fallen und neue CSS bekomme.

Oooops!

Es gab mir die Gelegenheit, andere URLs einzugeben (was schön ist), aber es gibt Zehntausende von URLs auf CSS-Tricks. Viele von ihnen sind ziemlich ähnlich, aber alle haben das Potenzial, Selektoren zu haben, die verwendet werden. Ich habe den Eindruck, dass JavaScript nicht ausgeführt wurde, weil alles, was über JavaScript auf die Seite kam, nicht stylen. Es hat sogar meine: Hover -Zustände gelöscht.

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

Teil eines Bauprozesses

PurifyCSS wird wahrscheinlich regelmäßiger als Build -Prozess -Tool als als Online -Schnittstelle verwendet. Ihre Dokumente haben Anweisungen für Grunzen, Schluck und Webpack. Zum Beispiel kugele Dateien, um sie zu überprüfen und zu verarbeiten:

 var content = ['**/src/js/*. js', '**/src/html/*. html'];
var CSS = ['**/src/css/*. CSS'];

var options = {
  // schreibt gereinigtes CSS in diese Datei.
  Ausgabe: './dist/purified.css' '
};

purify (Inhalt, CSS, Optionen);

Dies gibt Ihnen viel mehr Möglichkeiten für die Genauigkeit. Dieser Inhaltsblob könnte eine Liste jeder einzelnen Datei für die einzelnen Vorlage, teilweise und JavaScript sein, die Ihre Website erstellt. Das mag ein Schmerz sein, aber Sie werden sicherlich mehr Genauigkeit bekommen. Es berücksichtigt Inhalte in Datenspeichern (z. B. in diesem Blog-Beitrag, der in einer Datenbank lebt) und JavaScript von Drittanbietern, aber vielleicht ist das für Sie keine Rolle, oder Sie können es auf andere Weise berücksichtigen.

Purgecss, ein Konkurrent von PurifyCSS, warnt vor seiner Vergleichstechnik:

PurifyCSS kann nicht nur mit HTML oder JavaScript mit einem Dateityp arbeiten. PurifyCSS arbeitet, indem sie alle Wörter in Ihren Dateien betrachtet und mit den Selektoren in Ihrem CSS verglichen wird. Jedes Wort wird als Selektor angesehen, was bedeutet, dass viele Selektoren fälschlicherweise verwendet werden können. Zum Beispiel können Sie zufällig ein Wort in einem Absatz haben, der einem Selektor in Ihrem CSS entspricht.

Denken Sie also auch an das. Es ist dumm in der Art und Weise, wie es potenzielle Selektorübereinstimmungen vergleicht, was sowohl clever als auch gefährlich ist.

Unbenutztes CSS ist ein Online -Service, der Ihre Website für Sie kriecht

Das manuelle Konfigurieren eines Tools, um jede Seite auf Ihrer Website aus jedem Blickwinkel zu betrachten, ist sicherlich eine Aufgabe und etwas, das sich täglich synchronisiert werden muss, wenn sich Ihre Codebasis entwickelt. Interessanterweise versucht der Online -Service UNUSEDCSS, diese Belastung zu überwinden, indem er die Website selbst basierend auf einer einzigen URL, die Sie geben, kriechen.

Ich habe mich für den bezahlten Service angemeldet und auf CSS-Tricks hingewiesen. Ich gebe zu, mit einem Blick auf die Ergebnisse fühlt es sich für mich viel genauer an:

Sie können auch die gereinigte Datei herunterladen und bieten viele Anpassungen, z. B. Überprüfungs-/Unbeholfen -Selektoren, die Sie tatsächlich möchten/nicht möchten (z. B. Sie sehen einen Klassennamen, den Sie nicht benötigen.

Ich habe die verstärkte Genauigkeit des Online-Crawling-Service genossen, aber es gab viel Lärm, und ich kann auch nicht sehen, wie ich ihn praktisch in einen täglichen Build- und Release-Prozess integrieren würde .

Die Werkzeuge wird im Allgemeinen nach der Verarbeitung verwendet

Sagen Sie, Ihr CSS ist mit weniger oder sass gebaut und verwendet dann einen Postprozessor, um es zu CSS zu kompilieren. Sie würden wahrscheinlich die automatisierte ungenutzte CSS -Reinigung am Ende der anderen CSS -Vorverarbeitung integrieren. Wie…

1. Sass
2. Postcss / autoprefixer
3. [Saubere ungenutzte CSS] reinigen]
4. Produktion CSS

Das macht Sinn und ist für mich etwas lustig. Sie reparieren das Styling, das nicht verwendete CSS erzeugt, nicht. Stattdessen wischen Sie es einfach am Ende des Builds ab. Ich nehme an, JavaScript macht so etwas mit Baum schon seit einiger Zeit, also gibt es einen Präzedenzfall, aber es fühlt sich für mich immer noch komisch an, weil eine CSS-Codebasis so direkt praktisch ist. Dieses Setup ermutigt Sie fast, CSS überall zu entsorgen, da es keine Strafe für Übertreibung gibt. Es entfernt jeden Anreiz, zu verstehen, wie CSS angewendet und verwendet wird.

Purgecss ist ein weiteres Tool, das explizite Eingaben nimmt und die Ergebnisse liefert

Purgecss ist ein weiterer Spieler auf dem nicht verwendeten CSS -Markt. Eine tangentiale Sache, die ich mag, ist, dass es deutlich erklärt, wie es sich von anderen Werkzeugen unterscheidet. Zum Beispiel im Vergleich zu PurifyCSS:

Der größte Fehler bei PurifyCSS ist der Mangel an Modularität. Dies ist jedoch auch der größte Vorteil. PurifyCSS kann nicht nur mit HTML oder JavaScript mit einem Dateityp arbeiten. PurifyCSS arbeitet, indem sie alle Wörter in Ihren Dateien betrachtet und mit den Selektoren in Ihrem CSS verglichen wird. Jedes Wort wird als Selektor angesehen, was bedeutet, dass viele Selektoren fälschlicherweise verwendet werden können. Zum Beispiel können Sie zufällig ein Wort in einem Absatz haben, der einem Selektor in Ihrem CSS entspricht.

Purgecss behebt dieses Problem, indem er die Möglichkeit bietet, einen Extraktor zu erstellen. Ein Extraktor ist eine Funktion, die den Inhalt einer Datei übernimmt und die darin verwendete CSS -Selektoren extrahiert. Es ermöglicht eine perfekte Entfernung ungenutzter CSS.

Purgecss scheint im Moment der große Hund zu sein. Viele Leute benutzen es und schreiben darüber.

• Nghia Pham schrieb darüber, wie man es speziell mit Bootstrap benutzt,
• Greg Kohn schrieb eine Postwarnung, dass sie Selektoren unter ungewöhnlichen Umständen nicht mit Whitelisten löscht.
• Flavio Copes schrieb darüber, es mit NPM -Skripten und Postcss auszuführen.
• Sarah Dayan beschreibt sorgfältig, wie es mit Rückenwind funktioniert.

Obwohl Purgecss, die eine spezielle Konfiguration benötigen, um mit Rückenwind zu arbeiten, scheint es, als wären Rückenwind und Purgecss zwei Erbsen in einem Pod. Tatsächlich empfehlen ihre Dokumente, sie zusammen zu verwenden, und bieten eine CLI für die Verwendung in einem Build -Prozess.

Ich glaube, das Kern ist Folgendes: Tailwind produziert diese große CSS -Datei voller Versorger. Aber sie beabsichtigen nicht, dass Sie das Ganze verwenden. Sie verwenden diese Dienstprogramme -Selektoren in Ihrem HTML, um Ihr gesamtes Styling durchzuführen, und verwenden dann PurgeCSS, um sich alle Ihre HTML anzusehen und die nicht verwendeten Dienstprogramme in Ihrem Produktions -CSS auszuschütteln.

Dennoch wird es ein fortlaufendes Wartungsproblem sein, sie über jede einzelne Vorlage auf Ihrer Website zu vermitteln-JavaScript, HTML oder auf andere Weise-, während Sie etwas manuell konfigurieren, das sich auf Ressourcen Dritter stützt, und zu wissen, dass alle Daten, die aus einem Datenspeicher stammen, während eines Erstellungsprozesses wahrscheinlich nicht betrachtet werden können, wodurch es etwas zu einer manuellen Rechenschaft gezogen wird.

Meine Lieblingstechnik: Haben Sie jemanden, der mit Ihrem CSS -Codebasis wirklich vertraut ist

Vielleicht fühlt sich dies wie die Annäherung an einen alten Timer an, der mit der Zeiten kommen muss, aber hey, das fühlt sich für mich einfach der praktischste Ansatz an. Da dieses Problem so schwierig ist, denke ich, dass harte Arbeit die Antwort darauf ist. Es versteht das Problem und arbeitet im Laufe der Zeit auf eine Lösung. Ein Front-End-Entwickler, der in Ihrem Front-End eng involviert ist, wird ein Verständnis dafür haben, was nach der Zeit in CSS-Land verwendet und verwendet wird und es abweichen kann.

Ein extremer Testansatz, den ich gesehen habe, ist die Verwendung eines (dh Hintergrundbild: URL (/iis-this-being-used.gif?selector);) im CSS-Block und überprüfe dann die Serverprotokolle im Laufe der Zeit, um festzustellen, ob auf dieses Bild zugegriffen wurde. Wenn es zugegriffen wird, wurde es verwendet; Wenn nicht, war es nicht.

Aber vielleicht mein Lieblingswerkzeug in der potenziellen Toolbox ist Folgendes:

Visuelle Regressionstests

Sie Screenshot so viel von Ihrer Website wie möglich - wie alle wichtigsten Seiten und diese Seiten, die in verschiedene Zustände manipuliert werden - plus verschiedene Browser und Bildschirmgrößen. Diese Screenshots werden aus Ihrem Master -Zweig auf Git erstellt.

Bevor Zweige in den Master zusammengeführt werden, nehmen Sie all diese Screenshots von ihnen und vergleichen diese mit den Screenshots im Master. Nicht manuell, aber programmatisch.

Genau das macht Percy, also schau dir Folgendes an:

Im Laufe der Jahre gab es andere Stichproben über visuelle Regressionstest -Tools, aber Percy ist der einzige, den ich gesehen habe, der für mich klar ist. Ich muss nicht nur Screenshots machen. Ich möchte, dass sie verglichen werden, damit ich visuelle Unterschiede zwischen ihnen sehen kann. Ich möchte nicht nur die Unterschiede sehen. Ich möchte sie genehmigen oder missbilligen. Ich möchte auch, dass diese Genehmigung Zusammenführungen blockiert oder zulässt, und ich möchte den Browser steuern können, bevor der Screenshot aufgenommen wird. Ich möchte die Vergleichsbilder nicht manuell aktualisieren. Das ist alles Brot-und-Butter-Percy-Zeug.

Vollständige Offenlegung: Percy hat hier bereits hier auf CSS-Tricks-einschließlich des obigen Videos-die Dinge gesponsert, aber nicht diesen Beitrag.

Die Beziehung zu Atomic CSS und CSS-in-Js

Ich bin mir sicher, dass es viele Leute gibt, die dies lesen, die sagen würden: Ich habe keine ungenutzte CSS, weil die von mir verwendete Werkzeuge die genauen CSS erzeugt, die es benötigt, und nichts weiter.

Hey, das ist ein bisschen cool.

Vielleicht ist das Zerstäuber. Vielleicht sind das Tachyons, die Sie auch durch UNCSS laufen, und Sie sind sehr vorsichtig damit. Vielleicht ist es die Purgecss -Kombination aus dem Rückenwind, die momentan der letzte Schrei ist.

Vielleicht packten Sie sich andere Weise mit Stilen. Wenn Sie die JavaScript-Komponenten und -Stile wie Reakt und Emotionen streng koppeln oder nur CSS-Module mit allen, weniger nicht verwendeten CSS verwenden, ist dies von CSS-in-JS. Und weil Baumschütteln und Code-Splitting für die Fahrt in vielen auf JavaScript-basierten Build-Prozessen kommen, haben Sie nicht nur weniger CSS, sondern laden nur das, was Sie benötigen. All das gibt es Kompromisse.

Wie vermeiden Sie ungenutzte CSS in zukünftigen Projekten?

Ich denke, die Zukunft des Stylings ist eine absichtliche Trennung zwischen globalen und komponentierten Stilen. Die meisten Stile sind in Komponenten gesammelt, aber es gibt globale Auswahlmöglichkeiten, die die Kaskade (z. B. globale Typografie -Standardeinstellungen) klar nutzen.

Wenn das meiste Styling in Komponenten zurückgelassen wird, gibt es meiner Meinung nach weniger Möglichkeiten für ungenutzte Stile, da es viel einfacher ist, sich um einen kleinen HTML -Block und einen kleinen CSS -Block zu wickeln, der sich direkt miteinander bezieht. Und wenn Komponenten sterben oder sich entwickeln, stirbt das Styling oder entwickelt sich damit. CSS -Bündel werden aus Komponenten hergestellt, die tatsächlich verwendet werden.

CSS-in-JS-Lösungen gehen natürlich in diese Richtung, wenn die Stile an Komponenten gebunden sind. Das ist wirklich der Hauptpunkt. Aber es ist nicht erforderlich. Ich mag den generischen Ansatz von CSS -Modulen, der ziemlich ausschließlich für den Stilbereich für Stilbereiche geeignet ist und nicht vormatat, dass Sie ein bestimmtes JavaScript -Framework verwenden.

Wenn all das theoretisch oder außerhalb des Geräts erscheint und Sie nur eine Bootstrap-Site haben, auf der Sie versuchen, die Größe all dieser Bootstrap-CSS zu reduzieren, würde ich empfehlen, mit der Verwendung von Bootstrap aus der Quelle anstelle des endgültigen Standardverteilungsbündels zu beginnen. Die Quelle ist SCSS und aus einer Reihe hochrangiger Ebene basiert. Wenn Sie also keine bestimmten Teile von Bootstrap benötigen, können Sie sie entfernen.

Viel Glück da draußen, Gang.

Das obige ist der detaillierte Inhalt vonWie entfernen Sie ungenutzte CSS von einer Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!