ただ現状では既にインライン化されているCSSは最適化の処理判定外になるので、HTMLとCSSは分離した開発が必須になります。 DropCSSの採用が増えれば、開発フェーズはより厳密化されるでしょうね。それともインラインCSSのサポートのほうが早いかな。
処理速度や圧縮効率より私が良いなと思ったのは、コードが簡素で改良が簡単な事です。 これを活かして、さっそく未使用CSSを削除するだけではなく、CSSの遅延ロード時に使えるCSSを生成できるようにしてみました。 遅延ロードしたいCSSの例は、ファーストビューでは不要と判定されてもセカンドビューなどで本当は必要で、後から読み込むべきCSSの事です。 詳しい説明はこちら。
実装すべき事は至極単純で、HTML上に対応するCSSがない場合に削除するのではなく残すようにすれば良いだけです。 これは以下のコードを書き換えるだけです。
# before
if (domSel == '' || CSSselect.selectOne(domSel, htmlAst.childNodes, {adapter}) || shouldDrop(sel) !== true)
# after
if (domSel == '' || !CSSselect.selectOne(domSel, htmlAst.childNodes, {adapter}) || shouldDrop(sel) !== true)
pre.push(sel);
次に上記のコードを利用して以下の3つのCSSを生成します。
- ファーストビューのCSS
- ファーストビュー+セカンドビューのCSS (--ignoreオプションなどを利用)
- セカンドビューのCSS=2のCSSに上記コードを適用したCSS
original: 100%
before: 25% = 10% + 15=(10+5)%
after: 15% = 10% + 5=(15-10)%
このような最適化をしやすいところが、DropCSSの一番の利点と言えるでしょう。
0 件のコメント:
コメントを投稿