Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Tool-Tipp

PurgeCSS spürt ungenutztes CSS auf

(Grafik: Instacod.es)

Das Tool PurgeCSS hilft euch dabei, ungenutztes CSS aus eurem Code zu entfernen. Die Software kann über die Kommandozeile, über eine Javascript-API oder als Plug-in für verschiedene Build-Tools genutzt werden.

PurgeCSS ist ein hilfreiches Werkzeug, um die CSS-Größe eines Projekts zu verringern. Dazu sucht PurgeCSS vollautomatisch nach ungenutztem CSS und entfernt den entsprechenden Code-Bereich. Die Software kann als Kommandozeilenwerkzeug oder über eine Javascript-API genutzt werden. Außerdem gibt es auch Plugins für Webpack, Gulp und Rollup. Demnächst soll auch der Javascript-Task-Runner Grunt unterstützt werden.

Bei Bedarf könnt ihr auch über eine Konfigurationsdatei festlegen, welche Selektoren PurgeCSS unangetastet lassen soll. Ein derzeit noch experimentelles Feature gibt euch darüber hinaus die Möglichkeit, auch durch Javascript generierte Selektoren herauszufiltern. Dabei kommt Facebooks Prepack zum Einsatz.

PurgeCSS eliminiert auch unnötige Keyframes

Falls ihr CSS-basierte Animationsbibiotheken einsetzt, kann euch PurgeCSS auch dabei helfen, ungenutzte Keyframes zu eliminieren. Die Funktion ist standardmäßig allerdings deaktiviert, was ihr in der Konfigurationsdatei ändern könnt. In der umfangreichen PurgeCSS-Dokumentation findet ihr neben allgemeinen Informationen zum Einsatz auch Beispiele zur Nutzung des Tools mit React und Vue.

Ebenfalls interessant:

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
jsnanigans

Hi Kim, Ich bin einer der Authoren.
Ich wollte mich bedanken dass du über unser kleines Projekt berichtest.
Im nächsten update werden auch unnötige Font-Faces eliminiert, und die performance beim keyframes eliminieren wird auch verbessert.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen