AccueilActualités informatiqueDéveloppement web : l'outil Parcel CSS basé sur Rust minifie plus vite...

Développement web : l’outil Parcel CSS basé sur Rust minifie plus vite qu’esbuild

L’équipe derrière l’outil de construction Parcel a publié Parcel CSS. L’analyseur syntaxique, le compilateur et le minifier, écrits en Rust, doivent entre autres permettre d’accélérer les performances de la minification et d’en améliorer la qualité. Parcel CSS peut être utilisé dans Parcel, mais aussi comme bibliothèque autonome à partir de JavaScript ou de Rust, ou encore comme plug-in dans un autre outil.

Sommaire

La minification CSS doit être effectuée par Parcel CSS plus de 100 fois plus vite que CSSNano, et trois fois plus vite qu’esbuild. De plus, la sortie de Parcel CSS devrait parfois être nettement plus petite que celle d’outils similaires, car il peut convertir la syntaxe CSS héritée en syntaxe moderne et comprendre chaque propriété CSS. L’équipe Parcel démontre la vitesse de Parcel CSS et la taille de la sortie à l’aide de l’exemple de référence de la minification de Bootstrap 4, qui se compose d’environ 10.000 lignes.

Minification von Bootstrap 4 mit Parcel CSS verglichen mit esbuild und CSSNano

Minification de Bootstrap 4 avec Parcel CSS comparé à esbuild et CSSNano

(Image : Parcel)

Sous le capot, Parcel CSS est basé sur Rust Crate cssparser, un tokenizer CSS développé par Mozilla et utilisé dans Firefox. Cela devrait fournir une structure de base solide, entre autres pour la tokenisation et l’analyse syntaxique de base. Les capacités de Parcel CSS vont cependant au-delà des fonctions de cssparser, car il interprète en outre les propriétés et les règles CSS et peut aussi bien effectuer la minification et la compilation que renvoyer vers CSS.

Ceux qui utilisent l’outil de construction Parcel peuvent déjà utiliser Parcel CSS comme transformateur ou unificateur CSS – dans un avenir proche, il devrait remplacer complètement le transformateur et unificateur standard. Pour tester l’outil, il suffit d’ajouter le code suivant dans le fichier .parcelrc :

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

L’équipe de Parcel indique en outre qu’il faut utiliser la Property browserslist dans le package.json. Elle définit pour quels navigateurs cibles le CSS sera compilé. Parcel CSS doit pouvoir gérer les plug-ins PostCSS les plus utilisés comme Autoprefixer ou postcss-preset-env ainsi que les modules CSS, mais pas les plug-ins plus personnalisés comme Tailwind CSS. Dans ce cas, l’ajout @parcel/transformer-postcss devant @parcel/transformer-css-experimental est à insérer. Si les plug-ins mentionnés précédemment sont supprimés de la configuration PostCSS, Parcel CSS s’en charge. Par ailleurs, Parcel CSS peut également être configuré dans le package.json à la racine du projet.

Les développeurs qui n’utilisent pas Parcel peuvent utiliser Parcel CSS soit comme bibliothèque autonome, soit avec l’API JavaScript, soit en créant un plug-in pour n’importe quel outil de construction. Le Rust Crate parcel_css offre une autre alternative, mais contrairement à l’API JavaScript stable, il est encore à l’état d’alpha. Elle permet un accès complet à l’arbre syntaxique abstrait (Abstract Syntax Tree, AST) et offre la possibilité de développer un outillage personnalisé.

Afin de démontrer les capacités du projet, l’équipe Parcel a également créé Parcel CSS Playground, une démonstration en direct du navigateur. Parcel CSS, tout comme Parcel, est disponible sur GitHub sous licence MIT.

Pour plus d’informations sur ce nouvel outil, consultez le billet de blog consacré à l’annonce.

Plus d'articles