Webentwicklung: Rust-basiertes Tool Parcel CSS minifiziert schneller als esbuild

Das Team hinter dem Build-Tool Parcel hat Parcel CSS veröffentlicht. Der in Rust geschriebene Parser, Compiler und Minifier soll unter anderem eine schnellere Performance bei der Minification an den Tag legen und deren Qualität erhöhen. Parcel CSS lässt sich in Parcel nutzen, aber auch als Standalone-Bibliothek aus JavaScript oder Rust heraus sowie als Plug-in in einem anderen Tool gewrappt.

Rasante Performance dank Rust

Die CSS-Minification soll Parcel CSS über 100-mal schneller erledigen als CSSNano, und dreimal schneller als esbuild. Zudem soll der Output von Parcel CSS mitunter deutlich kleiner als bei ähnlichen Tools sein, da es Legacy-CSS-Syntax zu moderner Syntax konvertieren und jede CSS Property verstehen kann. Am Benchmark-Beispiel der Minification von Bootstrap 4, das aus etwa 10.000 Zeilen besteht, demonstriert das Parcel-Team die Geschwindigkeit von Parcel CSS und die Größe des Outputs.

Unter der Haube basiert Parcel CSS auf dem von Mozilla entwickelten und in Firefox genutzten Rust Crate cssparser, einem CSS Tokenizer. Das soll ein solides Grundgerüst bieten, unter anderem für Tokenization und grundlegendes Parsen. Die Fähigkeiten von Parcel CSS gehen jedoch über die Funktionen von cssparser hinaus, da es zusätzlich CSS-Properties und -Regeln interpretiert und sowohl Minification und Kompilierung erledigen als auch zurück zu CSS ausgeben kann.

Einsatz mit Parcel

Wer das Build-Tool Parcel verwendet, kann Parcel CSS als CSS-Transformer oder -Minifier bereits nutzen – in naher Zukunft soll es den Standard-Transformer und -Minifier ganz ersetzen. Zum Ausprobieren des Tools ist der folgende Code in der .parcelrc-Datei zu ergänzen:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.css": ["@parcel/transformer-css-experimental"]
  },
  "optimizers": {
    "*.css": ["@parcel/optimizer-css"]
  }
}

Das Parcel-Team weist zudem darauf hin, die Property browserslist in der package.json hinzuzufügen. Sie definiert, für welche Zielbrowser das CSS kompiliert wird. Parcel CSS soll mit den am meisten genutzten PostCSS-Plug-ins wie Autoprefixer oder postcss-preset-env sowie CSS-Modulen, aber nicht mit stärker benutzerdefinierten Plug-ins wie Tailwind CSS umgehen können. Dann ist der Zusatz @parcel/transformer-postcss vor @parcel/transformer-css-experimental einzufügen. Werden die zuvor gelisteten Plug-ins aus der PostCSS-Konfiguration entfernt, nimmt sich Parcel CSS dieser an. Daneben lässt sich Parcel CSS auch in der package.json im Root des Projekts konfigurieren.

Weitere Verwendungsmöglichkeiten

Entwicklerinnen und Entwickler, die Parcel nicht nutzen, können Parcel CSS entweder als Standalone-Bibliothek, mit der JavaScript-API oder durch Erstellen eines Plug-ins für ein beliebiges Build-Tool nutzen. Das Rust Crate parcel_css bietet eine weitere Alternative, befindet sich aber im Gegensatz zur stabilen JavaScript-API noch im Alpha-Status. Es erlaubt vollen Zugriff auf den abstrakten Syntaxbaum (Abstract Syntax Tree, AST) und bietet die Möglichkeit, ein benutzerdefiniertes Tooling zu entwickeln.

Um die Fähigkeiten des Projekts zu demonstrieren, hat das Parcel-Team zudem als Browser-Live-Demo den Parcel CSS Playground erstellt. Parcel CSS steht ebenso wie Parcel unter MIT-Lizenz auf GitHub bereit.

Weitere Informationen zu dem neuen Tool bietet der Blogeintrag zur Ankündigung.

(mai)