Bootstrap デカいな問題
最近の Bootstrap は 5.2.0 から CSS 変数の対応を進めているせいで、ファイルサイズの増大がやばいです。 bootstrap.min.css のサイズは 5.2.0 より前は約 160KB でしたが、いまや 228KB もあります。 そして今後のダークモードへの改善も考えると、ファイルサイズはガンガン増えることが想像できます。 なぜならどう考えても 5.3.0 では色が足りないし、色設定も足りないからです。 今後のファイル増加に備えて、以前から作っていた drop-inline-css をつよつよにすることで対応しました。そんなの作らないでいいからカスタムビルドしようと言う人もいるかも知れません。 しかしカスタムビルドではユーティリティクラスが邪魔すぎて、削除しない限り CSS サイズが縮小しません。 しかもユーティリティクラスはレイアウトやコンポーネントにも影響力を持っているため、 削除するとカスタムビルドがまったくできなくなってしまう問題もあります。 ユーティリティクラスの拡張は CSS 変数化の一貫で進められていますが、 最適化の観点から言えば超邪魔です。 一番の問題は HTML/CSS を解析して捨てるしか最適化ができない点です。 他の人は一体どうやって対処しているのか謎です。
積極的なインライン化をデフォルトに
drop-inline-css は、以下のコマンドを打てばたいていの CSS 最適化をやってくれます。drop-inline-css in.html > out.html--href オプションなしのデフォルトで実行すると、非常に高い圧縮効果があります。 しかし JavaScript で後から使うようなユーティリティクラスも消えるので、JavaScript で操作するときには注意が必要です。 ただなるべく簡単に使えるようには考えてあり、後で使いたいユーティリティクラスは以下のように HTML にキャッシュできます。
<div class="drop-inline-css dropdown-menu show opacity-50 d-none"></div>
不要 CSS の削除は PurgeCSS が安定
ところで、そもそもなぜ bootstrap.min.css を保持していたかというと、内部で使っていた DropCSS が完全な動作をしなかったからです。 今後は元ファイルを保持しないと決めてから問題を細かくチェックしたところ、CSS 変数をきちんと扱えなかったようで、Bootstrap 5.3.0 では .table-striped などがうまく動きませんでした。 ちなみに CSS 変数はかなり扱いが難しく、きちんとサポートできているツールがあるのかよくわからないです。 キー自体も変数化でき、順序によって意味も変わるなど、かなりややこしいので仕方ない気もします。 ただ、難しいなら複雑なことは無視したり、段階的に処理できたほうが良いことは間違いありません。そこで一番採用率の高い PurgeCSS に切り替えてみたところ、そのへんの設計がしっかりしていて、現状では一番良さそうでした。 ただ細かい最適化はきちんと動かないので、安心して使える部分だけ利用します。 CSS 変数はまだ動かないです。 JavaScript からの purge も完璧に動作させるのは難しそうです。 @keyframes は私が使った限りではバグを感じなかったですが、エラー報告されているのでひとまず様子見をしています。
Bootstrap 5 の定義リスト
初期レンダリングの改良では対応できないプロパティも多少はあります。 さきほどの例で dropdown-menu show の記述は重要で、Bootstrap のドロップダウンを使う時に必要です。 ドロップダウンは初期状態では非表示がほとんどなので、表示状態を事前定義しないと使えません。 同じように動きのあるコンポーネントには事前定義が必要です。 調査済みのコンポーネント別 Bootstrap 定義リストをメモしておきます。 こういったプロパティは自動指定できれば良いのですが、あまり良い方法はなさそうです。<div class="drop-inline-css
dropdown-menu show
modal modal-static
modal-backdrop fade show
carousel-item-prev carousel-item-next
carousel-item-start carousel-item-end
dropdown-toggle show
dropdown-menu show dropdown-item
toast showing
collapsing
d-none">
</div>
Offcanvas
上記は指定の簡単なものですが、面倒なものもいくつかあります。たとえば Offcanvas。 以下の指定でいけるのですが、これはあまり良い指定方法ではありません。offcanvas-backdrop fade show showing hidingそこで以下の指定方法が良いと思います。 この指定のほうが PurgeCSS や Bootstrap が更新した時に影響を受けにくいです。
<div class="drop-inline-css
offcanvas-backdrop fade show
offcanvas showing hiding
d-none" data-bs-backdrop="false" data-bs-scroll="true">
</div>
Tooltip
Tooltip は、さらに記載が面倒です。 どこに表示するかを JavaScript で検知し、data-popper-placement 属性で管理しているため、それをすべて定義しておかないといけません。 JavaScript 処理が増えると指定が面倒くさいですね。<div class="drop-inline-css
tooltip tooltip-arrow tooltip-inner bs-tooltip-auto fade show
bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start
d-none">
<div data-popper-placement="left"></div>
<div data-popper-placement="top"></div>
<div data-popper-placement="right"></div>
<div data-popper-placement="bottom"></div>
</div>
vs Tailwind
Tailwind も内部で PurgeCSS を使っているので、JavaScript 部分はどうしているのだろうと思って調べてみると、whitelist で対処しているようです。 これが意味するところは、まずは JavaScript からの purge は厳しいということでしょう。 そして whitelist についてですが、複雑な指定が難しく、ファイルごとへの最適化が難しく、表記の揺らぎへの対処が難しく、マッチ方法が色々あって困るなど、多くの欠点があると個人的には思っています。 今のところ HTML へのキャッシュのほうが楽でいいと思っています。 HTML へのキャッシュも複雑な指定をしにくい問題はありますが、複雑ならばコンポーネント化したほうが良く、そこに記述すべきではないかという気がします。最後に drop-inline-css を使うどどのような効果があるか、 marmooo.github.io のページを例に挙げてみましょう。 通常なら index.html 34KB, bootstrap.min.css 228KB で表示されますが、 完全にインライン化された現在は、index.html 45KB だけで表示できます。 つまり CSS は 11KB しかないということです。 読み込み時間に関しては PageSpeed Insigts だと 0.6秒くらいは短縮できます。 同じドメインの 100 くらいのアプリと数千ページにも適用して実験しましたが、問題は見つかりませんでした。 0.6秒の改善が手動だと大変ですが、drop-inline-css は一度設定すれば自動でやってくれるので気楽です。
0 件のコメント:
コメントを投稿