使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。
という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。
以下はFinding Dead CSSの日本語訳です。
Finding Dead CSS
私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。
今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。
数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。
そこには既に使われていないCSSがあるだけではなく、完全に使われていないコードがある可能性もあります。
廃止はされたもののコードが削除されることはなく、決して辿り着くことのできないコードの終着点。
ユーザがそこに到達することはおそらく不可能だが、未だ生存しているかもしれないWebページの袋小路。
そのようなデッドコードを抽出するにはどうすればよいでしょうか。
uncssのようなツールは強力ですが、今回の用途には向いていません。
今必要としているのは、RUMのようなソリューションです。
ユーザがWebサイトで実際に画面表示するコードを特定するにはどうすれば？
非常にシンプルで、費用対効果も高い解決策があることがわかりました。
サイトのリニューアルがあったとしましょう。
レガシーな予約システムを、数ヶ月から数年かけて段階的に移行しました。
少なくとも理論的には、全ての顧客とユーザは新しいサイトに移行したので、古いコードの除去は始められるはずです。
最初に行うことは、どこのコードが死んでいるかの仮説を立てることです。
もはやユーザが訪れることのないであろうCSSセレクタ( ここでは#checkout_wrapperとします )を選択します。
次に、1*1ピクセルの透明な画像を作ってdeadディレクトリに放り込みましょう。
最後に、選んだCSSセレクタの背景にその画像を設定します。
#checkout_wrapper {
background-image: url('/assets/img/dead/checkout_wrapper.gif');
}
3ヶ月寝て待った後、サーバのアクセスログを確認しましょう。
画像へのアクセスログがなかったのであれば、誰もそのレガシーなコンポーネントをレンダリングすることはなかったということです。
安心して全てを削除しましょう。
アクセスログが発見されたのであれば、何らかの形でそのレガシーなはずのコンポーネントにアクセスが可能であることがわかります。
どれだけ依存されているかは、アクセス数によってわかるでしょう。
もちろん、このテクニックは完全にフェールセーフではありませんが、コードの削除がプロダクションアプリにどれくらいの影響を与えるかの試金石としては十分な機能を提供するでしょう。
自己紹介
ハイ、私はHarryです。
イギリスのフロントエンドアーキテクトアワードを取得しました。
主にCSSについて、書いたもの、ツイート、スピーチ、コード、コンタクト
感想
スマートどころかすごい力業だった。
しかし彼のプロダクトや業績を見てみるとけっこうすごいかんじの人なので、先端技術を一周して行き着いた先がこの結果、ということなのかもしれません。
それにしても普通にググるとChrome開発者ツールばっかり出てきて困りますね。
それでわかるのは『そのページで使われてないCSS』であって『サイト全体で使われてないCSS』ではないのだ。
そんなやりかたでCSSを削除すると血を見るぞ。