Frage Optimierung- Gibt es eine Möglichkeit, unbenutztes CSS und Javascript zu finden und zu entfernen, das allen HTML-Seiten gemeinsam ist? [geschlossen]


Meine Website hat viele Webseiten und ich versuche meine Stylesheets und Skripte zu bereinigen. Etwa 10% oder mehr von jedem js / css werden von keiner der HTML-Seiten auf meiner Website verwendet. Was ich brauche, ist das Entfernen der gemeinsamen unbenutzten und redundanten CSS und JS. Ich habe ein wenig recherchiert und gefunden Dies. Aber es ist nicht frei.
HINWEIS:

  • Einige der js / css werden von mehr als einer html-Seite aufgerufen und immer noch gibt es einen Teil jeder js / css, der nicht von irgendeiner der html-Seiten verwendet wird, die sie aufrufen.
  • Meine Website ist nur in Chrome kompatibel.

23
2018-02-13 10:13


Ursprung


Antworten:


Ja, du solltest Addy Osmanis benutzen grunt-uncss-Plugin um ungenutztes CSS zu bereinigen. Ich bin mir nicht sicher, ob Sie ein Tool zum Entfernen von nicht verwendetem JS verwenden können, da es abhängig von der Anwendungslogik ist, welcher Teil von JS-Code aufgerufen wird.


9
2018-02-13 10:19



Chrom öffnen DevToolsunter Audits Sie können den aktuellen Status überprüfen oder die Seite neu laden und beim Laden überprüfen

Dann unter Webseiten-Leistung Es gibt einen Abschnitt, der besagt: "Entfernen Sie nicht verwendete CSS-Regeln

Jetzt, als ich es benutzt habe, habe ich gesehen, dass es einige CSS auflistet, die ich benutzt habe. Das Problem war im momentanen Zustand. Wenn man Klassen umschaltet, zeigt es natürlich, wenn die Klasse nicht ist derzeit angewendet.

BTW wenn das nicht so weit ich weiß, es in Chrom Kanarienvogel funktioniert. Ich erinnere mich auch nicht, ob ich dafür eine Flagge aktiviert habe. (Ich denke nicht)


6
2018-02-20 10:17



Zunächst einmal gibt es vollständige Lösungen, von denen einige wahrscheinlich bereits auf SO bezogen sind, aber ich kenne sie nicht, und viele werden wahrscheinlich Geld kosten. Wenn ich du wäre, würde ich anfangen, mit den Schlüsselwörtern "clean up css lint" und "reinigt javascript lint" oder etwas ähnliches herum zu suchen. Ich würde nicht gehen und meinen eigenen Code für diesen Zweck schreiben.

Nun, wenn ich nicht du wäre oder nach ein paar Stunden der Suche hatte ich noch nichts gefunden, das meine Bedürfnisse erfüllt, könnte ich mich entscheiden, dies selbst zu versuchen. Was Sie tun könnten, wenn Sie bereit sind, sich zumindest für das CSS schmutzig zu machen, führt lokal ein Skript aus, um alle bereitgestellten HTML-Dateien zu durchlaufen

  1. Extrahiere alle referenzierten Stylesheets von jedem und erstelle eine Liste
  2. Extrahiere die Namen aller CSS-Klassen und IDs von jedem und erstelle eine Liste
  3. Ordnen Sie die Liste den tatsächlich im HTML-Code verwendeten Klassen und IDs zu
  4. Erstellen Sie eine Liste all derer, die nicht vorhanden sind, und speichern Sie sie für den einfachen Zugriff in einer Datei

Sie könnten so etwas in Python in ein paar Stunden zusammenwerfen, wenn Sie damit vertraut sind. Dies hängt natürlich davon ab, welche Sprache Sie für schnelles und schmutziges Scripting verwenden.

Das Analysieren von Javascript-Dateien wäre wegen der Probleme mit der Logik etwas schwieriger. Sie könnten etwas Ähnliches tun, aber es ist vielleicht nicht in Ihrem Interesse, im Grunde Ihren eigenen Javascript-Interpreter zu schreiben, um ein paar ungenutzte Funktionen zu bereinigen. Ja, du tust es, aber du erfindest das Rad neu. Es könnte eine gute Idee sein, sich IDEs anzusehen, in denen diese Funktionalität eingebaut ist. Einige sind kostenlos und vor allem müssen Sie sie nicht selbst schreiben.


3
2018-02-13 10:33



Sie können GTmetrix verwenden, um CSS-Code zu bereinigen http://gtmetrix.com/remove-unused-css.html. Geben Sie die URL ein und drücken Sie GO!

http://www.peterbe.com/plog/mincss ist ein Tool, das bei der Angabe einer URL (oder mehrerer URLs) diese Seite und alle zugehörigen CSS-Dateien herunterlädt und jeden einzelnen Selektor im CSS vergleicht und feststellt, welche nicht verwendet werden. Das Ergebnis ist eine Kopie des ursprünglichen CSS, jedoch mit den Selektoren, die nicht in den entfernten Dokumenten gefunden wurden.

Sie können auch das Google Chrome-Audit-Tool auf dieser Website verwenden http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

oder Sie können die Google Chrome-Erweiterungen verwenden

  1. https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnnik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=de-DE

3
2018-02-23 10:02



Helium CSS ist ein JavaScript-Tool zum Auffinden von unbenutztem CSS auf vielen Seiten einer Website. Sie müssen zuerst die JavaScript-Datei auf der Seite installieren, die Sie testen möchten. Dann müssen Sie eine Heliumfunktion aufrufen, um mit der Reinigung zu beginnen.

CSSESS ist ein Bookmarklet, mit dem Sie nicht verwendete CSS-Selektoren auf einer beliebigen Site finden können. Dieses Tool ist ziemlich einfach zu benutzen, aber es lässt Sie keine sauberen CSS-Dateien konfigurieren und herunterladen. Es werden nur nicht verwendete CSS-Dateien aufgelistet.


1
2018-02-20 10:26



Sie kennen Ihren Code gut, aber dies sollte Ihnen helfen, die ganze Arbeit zu erledigen, die Sie gerade gelesen haben. Frühjahrsputz ungenutztes CSS mit Grunt, Gulp, Brokkoli oder Brunch


0
2018-02-23 08:01



Sie können erwähnen, unten Link und reinigen Sie Ihre HTML-Code und CSS.

http://validator.w3.org/#validate_by_uri+mit_optionen


0
2018-02-23 12:10