it-swarm.com.de

Optimierung - Gibt es eine Möglichkeit, nicht verwendete CSS und Javascript, die auf allen HTML-Seiten vorhanden sind, zu finden und zu entfernen?

Meine Website hat viele Webseiten und ich versuche, meine Stylesheets und Skripte zu bereinigen. Etwa 10% oder mehr der einzelnen js/css werden von keiner der HTML-Seiten auf meiner Website verwendet. Was ich brauche, ist, die üblichen unbenutzten und redundanten css und js zu entfernen. Ich habe ein bisschen recherchiert und das gefunden. Aber es ist nicht frei.
HINWEIS: 

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

Ja, Sie sollten Addy Osmanis grunt-uncss-Plugin verwenden, um nicht verwendetes CSS zu bereinigen. Ich bin nicht so sicher, ob Sie ein Tool zum Entfernen nicht verwendeter JS verwenden können, da es von der Anwendungslogik abhängt, welcher Teil des JS-Codes aufgerufen wird.

10
codeepic

Öffnen Sie chrome DevTools , unter Audits Sie können den aktuellen Status überprüfen oder die Seite und Audit on Load neu laden

Dann unter Web Page Performance es gibt einen Abschnitt, der besagt: "Entfernen Sie nicht verwendete CSS-Regeln

Als ich es benutzte, sah ich, dass es einige Css auflistete, die ich benutzte. Das Problem war im gegenwärtigen Zustand nicht verwendet worden. Wenn Sie also mit den Klassen umschalten, wird dies offensichtlich angezeigt, wenn die Klasse nicht verwendet wird derzeit angewendet.

Übrigens, wenn das meines Wissens nicht auftaucht, funktioniert es auch in Chrom-Kanarienvogel. Ich kann mich auch nicht erinnern, ob ich dafür eine Flagge aktiviert habe. (Ich glaube nicht)

6
Edwin Reynoso

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

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

sie können auch das Google Chrome-Audit-Tool verwenden. Weitere Informationen finden Sie auf dieser Website 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/dokggbghedajooenkgjbamikfgnngeik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=de
3
Zain Aftab

Zunächst einmal gibt es Komplettlösungen, von denen einige wahrscheinlich bereits auf SO Bezug genommen werden, aber ich kenne keine von ihnen, und viele dürften Geld kosten. Wenn ich Sie wäre, würde ich mit den Schlüsselwörtern "clean up css lint" und "clean javascript lint" oder etwas Ähnlichem suchen. Ich würde nicht meinen eigenen Code für diesen Zweck schreiben. 

Wenn ich nicht Sie gewesen wäre oder nach ein paar Stunden des Suchens immer noch nichts gefunden hätte, das meinen Bedürfnissen entsprochen hätte, könnte ich mich entscheiden, dies selbst zu versuchen. Was Sie tun könnten, wenn Sie bereit sind, sich schmutzig zu machen, zumindest für das CSS, ist das Ausführen eines Skripts, das lokal für jede bereitgestellte HTML-Datei ausgeführt wird

  1. Extrahieren Sie alle referenzierten Stylesheets und erstellen Sie eine Liste
  2. Extrahieren Sie die Namen aller CSS-Klassen und IDs und erstellen Sie eine Liste
  3. Vergleichen Sie die Liste mit den Klassen und IDs, die im HTML tatsächlich verwendet werden
  4. Erstellen Sie eine Liste mit allen anderen, und speichern Sie sie für den einfachen Zugriff in einer Datei

Wenn Sie sich damit auskennen, könnten Sie vielleicht in ein paar Stunden so etwas in Python zusammen werfen. Das hängt natürlich davon ab, welche Sprache Sie für schnelles und schmutziges Scripting verwenden.

Das Analysieren von Javascript-Dateien wäre aufgrund der Probleme mit der Logik etwas schwieriger. Sie könnten etwas Ähnliches tun, aber es ist möglicherweise nicht in Ihrem besten Interesse, im Wesentlichen Ihren eigenen Javascript-Interpreter zu schreiben, um einige nicht verwendete Funktionen zu entfernen. Ja, Sie machen den Code, aber Sie würden das Rad neu erfinden. Es ist tatsächlich eine vernünftige Idee, IDEs mit dieser integrierten Funktionalität zu untersuchen. Einige sind kostenlos und vor allem müssen Sie sie nicht selbst schreiben.

3

Helium CSS ist ein Javascript-Tool zum Erkennen von nicht verwendetem 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 Helium-Funktion aufrufen, um die Reinigung zu starten.

CSSESS ist ein Bookmarklet, mit dem Sie nicht verwendete CSS-Selektoren auf jeder Site finden können. Dieses Tool ist ziemlich einfach zu bedienen, aber Sie können nicht saubere CSS-Dateien konfigurieren und herunterladen. Es werden nur nicht verwendete CSS-Dateien aufgelistet.

1
rJ7

Sie können den untenstehenden Link verwenden und Ihren HTML-Code und Ihre CSS-Datei bereinigen.

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

0
user1584418

Sie kennen Ihren Code gut, aber dies sollte Ihnen dabei helfen, all die Arbeit zu erledigen, die Sie nur durchlesen. Frühjahrsputz ungenutztes CSS mit Grunt, Gulp, Broccoli oder Brunch

0
Willie Mwewa