So entfernen Sie überflüssiges CSS

Im Prozess der Webentwicklung führen mehrere Entwickler und der Lauf der Zeit häufig zur Anhäufung einer großen Anzahl redundanter Stile in CSS-Dateien, dem sogenannten „Junk-CSS“. Dieses Junk-CSS führt dazu, dass die Website extrem groß und komplex wird, verringert die Leistung und Wartbarkeit und erhöht auch die Entwicklungskosten. Daher ist das Bereinigen von redundantem CSS in einigen großen Projekten zu einem ernsten Problem geworden, das gelöst werden muss.

Wie entfernt man also überflüssiges CSS? Hier werde ich einige Methoden und Werkzeuge zur Lösung dieses Problems vorstellen:

1. MANUELLE REINIGUNG

Die manuelle Reinigung ist die originellste und einfachste Methode. Indem Sie sich Ihre CSS-Dateien genauer ansehen und überflüssige und ungenutzte Stile entfernen, können Sie erhebliche Optimierungsergebnisse erzielen. Allerdings sind auch die Nachteile dieser Methode offensichtlich. Der Vorgang ist zeit- und arbeitsintensiv, erfordert extreme Geduld und Sorgfalt und ist anfällig für Auslassungen und Fehler. Daher eignet sich diese Methode für kleinere Projekte und einfache Seiten.

2. Code-Analyse-Tool

Das Code-Analyse-Tool kann uns dabei helfen, Junk-CSS-Code automatisch zu finden und so das schnelle Auffinden und Löschen überflüssiger Stile zu vereinfachen. Häufig verwendete Tools sind:

(1) Google Chrome DevTools

Chrome DevTools ist ein Tool, das mit dem Chrome-Browser geliefert wird. Mithilfe der Abdeckungsanalysefunktion können Sie ungenutzte Teile finden des CSS-Codes und löschen Sie ihn. Die spezifische Bedienungsmethode ist wie folgt:

• Chrome DevTools öffnen
• Registerkarte „Abdeckung“ auswählen
• Klicken Sie auf die Schaltfläche „Aufzeichnung starten“. und warten Sie, bis die Website geladen ist. Fertig
• Aufnahme beenden und nicht verwendeten CSS-Code anzeigen

Vorteile: Einfach und benutzerfreundlich, keine Installation anderer Software erforderlich.

(2) PurifyCSS

PurifyCSS ist ein Befehlszeilentool, das verwendete Stile aus HTML- und CSS-Dateien extrahieren und eine neue CSS-Datei generieren kann. Die spezifische Betriebsmethode ist wie folgt:

• PurifyCSS installieren: npm install purify-css
• Verwenden Sie den PurifyCSS-Befehl: purifycss [input.css] [content.html ] -o [output.css]

Vorteile: Kann eine große Anzahl von CSS-Dateien automatisch verarbeiten.

3. Automatisierungstool

Automatisierungstool ist eine leistungsfähigere und effizientere Möglichkeit, durch einige Skripte eine automatische Bereinigung zu erreichen. Häufig verwendete Tools sind:

(1) Grunt

Grunt ist ein JavaScript-basierter Task-Runner, der über einige Plug-Ins automatisch CSS, JavaScript, Bilder und andere Ressourcen verarbeiten kann . Redundantes CSS kann mit dem grunt-uncss-Plugin bereinigt werden. Die spezifische Betriebsmethode lautet wie folgt:

• Grunt installieren: npm install -g grunt-cli
• Gehen Sie zum Stammverzeichnis des Projekts und erstellen Sie ein neues Datei mit dem Namen Gruntfile.js
• Konfigurieren Sie die Datei Gruntfile.js und fügen Sie die Plug-In-Verwendung grunt-uncss hinzu
• Führen Sie den Grunt-Befehl aus, um die Grunt-Aufgabe auszuführen

Vorteile: Durch eine Reihe von Aufgaben können vielfältige Funktionen erreicht werden und es ist äußerst flexibel und skalierbar.

(2) Gulp

Gulp ist ein flussbasiertes automatisiertes Build-Tool, das CSS über einige Plug-Ins auch automatisch bereinigen kann. Das Bereinigen von redundantem CSS kann mithilfe des gulp-uncss-Plugins erreicht werden. Die spezifische Betriebsmethode lautet wie folgt:

• Gulp installieren: npm install -g gulp-cli
• Erstellen Sie ein neues Projekt und geben Sie das Projektstammverzeichnis ein#🎜 🎜## 🎜🎜#Installieren Sie das gulp-uncss-Plug-in: npm install --save-dev gulp-uncss
• Fügen Sie verwandte Aufgaben in der gulpfile.js-Datei hinzu
• Verwenden Sie den Befehl gulp, um die Aufgabe auszuführen
• Vorteile: Daten können durch Streaming verarbeitet werden, die Geschwindigkeit ist hoch und eine große Anzahl von Dateien kann effizient verarbeitet werden.

Zusammenfassend lässt sich sagen, dass es viele Methoden und Tools gibt, aus denen Sie wählen können, um überflüssiges CSS zu entfernen. Die konkret gewählte Methode hängt von der Größe und Komplexität des Projekts sowie den Gewohnheiten und Vorlieben des Entwicklers ab. Aber insgesamt ist die Bereinigung von redundantem CSS eine sehr nützliche Sache und kann die Leistung und Wartbarkeit Ihrer Website erheblich verbessern.

Das obige ist der detaillierte Inhalt vonSo entfernen Sie überflüssiges CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!