Réduire la charge Css avec PurifyCss

Aujourd’hui, Les framework Css prolifèrent, et il est impensable de créer une page html ou une application type SPA (single page application) sans l’aide d’un Bootstrap, d’une pure.css ou d’un foundation.

Le problème, vous vous retrouver avec un poids des 200, 300, ou 500k sur une simple page…un peu cher payé non ? Les performances de chargement de votre page ou de votre application en seront fortement pénalisées…

purifyCss nous offre une solution simple, peu coûteuse et complète. Elle scanne les pages en question, html, js et css et fournit une version minifiée réduite au maximum, souvent 60% en moins du poids initial !

Comment ca marche

PurifyCss a la bonne idée de fournir une interface Cli, ce que nous allons voir aujourd’hui.

Dans le dossier de votre application, ouvrez le terminal. Assurez-vous d’avoir node.js qui fonctionne, ou installez-le.

Vérifiez que le module est bien installé avec cette commande :

Si C’est ok, vous devriez avoir le manuel utilisateur :

Si c’est bien le cas, parfait ! on peut commencer à utiliser purifycss, un simple example parlant :

Ici, je demande à purify d’examiner, le css et le js (style.css et custom.js) et de vérifier le contenu, (index.html et confirmation.html) avec les options de minifications (–min), le tout dans un dossier (dist) sur le fichier de mon choix (purified.css)

L’auteur a eu la bonne idée d’intégrer également le module sous Webpack, grunt ou gulp !

Retrouvez le module purify-css sur Github