BootstrapをPurgeCSSで軽量化（その２）

先日に続き、Start Bootstrapで提供されている無料テーマをPurgeCSSで軽量化したらどの程度になるか試してみました。

前回はClean Blogというテーマでしたが、今回はAgencyとCreativeの2つです。いずれもかなり軽量化できています。

Agency

Creative

どの程度軽量化できるかは、どの程度Bootstrapを使っているかに左右されますので、必ず〇％軽量化できるというものではありません。ごくごく1部しか使っていない場合は10KB程度になることもありますし、私の利用範囲でも上例同様、20KB～30KB程度になることが多いです。

tailwindCSSの場合は、そのまま使うとメガバイト級になりますので、本番用のビルドではPurgeするのがデフォルトかと思います。そしてtailwindCSSは一桁KBに収まることも多いようです。

ただ、tailwindCSSはどうしてもclass表記がかなり長文化しがなので（機能的に不便はないのですが見た目に違和感を感じています）、@applyを使ってまとめてあげる必要が生じます（私の場合は）。そして、これが面倒くさいので、やっぱBootstrapがいいなぁと思っています。