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がいいなぁと思っています。

BootstrapをPurgeCSSで軽量化

Bootstrapは大変便利ですね。ただ、重たいのが気になることもあります。必要なコンポーネントだけ読み込んだとしても各々結構なサイズです。

こんな時お薦めなのが不要なCSSを削除してしまう方法です。代表的なものがPurgeCSS。上の画像は、Start Bootstrapにある無料テーマ「Clean Blog」をPurgeCSSで軽量化した模様です。

styles-orininal.cssがClean BlogのもともとのCSS（Bootstrap 5）で、styles-orininal.min.cssがそれをMinifyしたもの、styles.cssがPurgeCSSでの削除後です。

Minifyして159KB程度だったものが23KB程度になっていますのでかなりの効果だと思います。

本番用にデプロイする際はPurgeCSSでドンと軽量化しておくと良いですね！

Windows版Googleドライブのアカウント変更（切替）

パソコン版のGoogleドライブ（旧：Googleドライブファイルストリーム）は、Googleドライブをローカルドライブのように使えて人によっては大変便利だったりするようです。

ただ、1つのPCで複数のGoogleアカウントを運用している場合、ローカルドライブ的に使うGoogleドライブのアカウントを切り替えてやる必要があります。

ネットで切替方を探していると「Googleドライブのアイコンをクリックして、、、設定メニューを云々、、、」みたいな情報が出て来るものの、スタートメニュー内のGoogleドライブをクリックしても、ローカルドライブとして表示されたGoogleドライブをいじろうとも設定メニューなんてものは出てきません。

で、しばらく狼狽していると、ふと気付きました。こんなところに潜んでいます。

考えてみるとここに潜んでいて当然ですね

 こいつをクリックしてやると希望通りアカウントの切り替えができました！

歯車アイコンを押すとメニューが表示されます

たったこれだけの事ですが、ここに至るまでに、一旦Googleドライブをアンインストールして再インストール等してみた際、アンインストルーしたはずのGoogleドライブが動いていて上手く行かなかった経験を得ましたので、これも書き留めておきます。Googleドライブをアンインストールしてもバックグラウンドのプロセスが動いていますので、アンインスト／再インストする場合は、そいつらを殺してください。

CPUを消費しているプロセスを狙い撃ち

Windows10だと「Ctrl」＋「Shift」＋「Esc」で上のようなものが表示されます。Googleドライブの亡霊が沢山並んでいると思います。亡霊は「タスクを終了」してもなかなか成仏しません。そんな時はCPUを消費しているプロセスを狙い撃ちしてみてください。一斉に成仏してくれると思います。