Ein Artikel, der erklärt, wie man überflüssiges CSS entfernt

Im Prozess der Webentwicklung führen mehrere Entwickler und der Zeitablauf 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, die Leistung und Wartbarkeit verringert und auch die Entwicklungskosten steigen. 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: Eine Vielzahl von Funktionen kann durch eine Reihe von Aufgaben erreicht werden und weist eine hohe Flexibilität und Skalierbarkeit auf.

(2) Gulp

Gulp ist ein flussbasiertes automatisiertes Build-Tool, das über einige Plug-Ins auch automatisch CSS bereinigen kann. Das Bereinigen von redundantem CSS kann mithilfe des gulp-uncss-Plugins erreicht werden. Die spezifische Betriebsmethode ist 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 zur Auswahl gibt, 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 das Bereinigen von redundantem CSS eine sehr nützliche Sache und kann die Leistung und Wartbarkeit Ihrer Website erheblich verbessern.

Das obige ist der detaillierte Inhalt vonEin Artikel, der erklärt, wie man überflüssiges CSS entfernt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!