サイトから未使用のCSSをどのように削除しますか？

これが前もって知ってほしいことです。これは難しい問題です。あなたがプロジェクトから削除できるCSSを正確に伝えることを実行できるツールを指摘することを望んでいるためにここに着陸した場合、そこにツールがありますが、私はそれらに完全なストーリーを伝えることができないので、それらに非常に注意するよう警告しています。

私はあなたが欲しいものを知っています。ツールを実行し、それが伝えるものを削除すると、2.2分でより速いサイトがあります。申し訳ありませんが、あなたを失望させるつもりです。

私はあなたがそのようなあらゆるツールに対して健全なレベルの懐疑論を持っているべきだと思います。それらのどれもあなたに正確に嘘をついていません - 彼らはしばしば安全で実用的な結果を与えるのに十分な情報を持っていません。それは、あなたがそれらを使用できない、またはそれができないということではありません。散歩しましょう。

動機

未使用のCSSを削除したいという欲求のための1位のドライバーはこれだと思います：

CSSフレームワーク（Bootstrapなど）を使用して、フレームワークのCSSファイル全体を含み、提供するパターンのほんの一握りしか使用しませんでした。

私はそれに共感することができます。 CSSフレームワークは、多くの場合、使用しているものだけにオプトインする簡単な方法を提供しません。ソースをカスタマイズしてそのように機能するには、チームが持っていないレベルの専門知識が必要になる場合があります。それが、あなたが最初にフレームワークのために到達した理由かもしれません。

100 kbのCSSをロードしているとします。それはたくさんだと思います。 （私が書いているように、このサイトには〜23 kbがあり、ページやテンプレートはかなりあります。サイズを減らすために特別なことは何もしません。）あなたはそれらのバイトの一部を使用していないという疑いまたはいくつかの証拠があります。アラームの原因を見ることができます。 100 kbのJPGをお持ちの場合、何らかのツールにドロップすることで20 kbに圧縮できる場合、それはすごい価値があります。しかし、CSSが頭にロードされ、ブロックされているため、CSSに対してそれを行うことの利益はさらに重要です。 JPGはそうではありません。

？ 「カバレッジ」を見る

ChromeのDevToolsには、CSSとJavaScriptがどれだけ使用されているかを示す「カバレッジ」タブがあります。たとえば、CSS-Tricksのホームページに今すぐアクセスした場合…

Style.cssファイルの70.7％が使用されていないことがわかります。私はそれが正しいと思います、そして、CSSの残りの部分は他の場所で使用されていると思います。このサイトに大きなスタイルのライブラリを捨てただけではありませんでした。私はそれの各行を手作業で書いたので、2/3以上が世界的に使用されていないという疑問があります。

「録音」を開始してから、サイトのさまざまな領域をクリックして、異なるHTMLを持つ異なるページがレンダリングされると、未使用の番号がダウンするのを見てください。単一のページアプリがない限り、CSSカバレッジをマルチページの見方をするのにあまり役に立ちませんか？

私はそれを言うのは嫌いですが、私はコードカバレッジをかなり役に立たないと思います。私にとっては、サイト上のこのすべての未使用のコードの悲惨な絵を描いています。

これは、最初に未使用のCSSを発見して削除する必要があるという考えを与えられたものであるかもしれません。

私の主な関心事

私の最大の懸念は、コードカバレッジのようなものを見て、未使用の行を見ることです。

そして、あなたは行き​​ます、完璧！そのCSSを削除します！そして、あなたはそれがまったく使用されていないことを知るためだけに、あなたはサイト全体で大きなスタイリングの問題を引き起こしました。ここにあります。CSSセレクターが使用されていないかどうかは実際にはわかりません。

1. サイト全体のすべてのページでカバレッジを確認してください…
2. すべてのJavaScriptを実行している間…
3. 国家のあらゆる可能な組み合わせの下で…
4. 使用したメディアクエリのあらゆる可能な組み合わせで。

ホームページをチェックすることはカウントされません。すべてのトップレベルのページをチェックすることはカウントされません。すべてのエッジケースのシナリオは言うまでもなく、常に最高のものではない状態を含むすべてのページを掘り下げなければなりません。それ以外の場合は、グレース期間中にログインしたユーザーに表示されるユーザーに表示されるユーザーに表示されるユーザーに表示されるポップアップモーダルのクレジットカード選択スタイリングのドロップダウンスタイリングを削除することになります。

これは、自動化されたツーリングがアプローチを約束するには複雑すぎて、特にブラウザのコンテキスト（異なる画面サイズ、異なる機能、異なるブラウザ）およびサードパーティの未知のものを因数分解する場合です。

これが私の懸念事項の例です：

PurifyCSS OnlineはいくつかのURLを採用し、すぐに使用するCSSのコピー患者の塊を提供します

CSS-Tricks.comをオンラインでPurifyCSSに落とし、新しいCSSを取得しています。

ooooops！

それは私に他のURLを入れる機会を与えてくれました（これはいいです）が、CSS-Trickには何万ものURLがあります。それらの多くはかなり似ていますが、それらのすべてが使用されるセレクターを持っている可能性があります。 JavaScriptを介してページに掲載されたものはすべてスタイルのままになったため、JavaScriptを実行しなかったという印象を受けます。それは私の：Hover Statesを削除しました。

おそらく、これらのツールに対する私の信頼が非常に低い理由を見ることができます。

ビルドプロセスの一部

PurifyCSSは、おそらくオンラインインターフェイスではなく、ビルドプロセスツールとしてより定期的に使用されます。彼らのドキュメントには、Grunt、Gulp、およびWebpackの指示があります。たとえば、それらをチェックして処理するためのグローブファイル：

 var content = ['**/src/js/*。js'、 '**/src/html/*。html'];
var css = ['**/src/css/*。css'];

var options = {
  //このファイルに精製されたCSSを書き込みます。
  出力： './dist/purified.css'
};

Purify（Content、CSS、Options）;

これにより、より多くの正確さの機会が得られます。そのコンテンツBLOBは、サイトを構築するすべてのテンプレート、部分、およびJavaScriptファイルのリストになる可能性があります。それは維持するのが苦痛かもしれませんが、あなたは確かにより正確さを得るでしょう。データストア（たとえば、データベースに住んでいるこのブログ投稿）とサードパーティのJavaScriptのコンテンツを考慮していませんが、それはあなたにとって重要ではないかもしれませんし、他の方法を説明することができます。

PurifyCSSの競合他社であるPurgecssは、その比較手法について警告しています。

PurifyCSSは、HTMLまたはJavaScriptだけでなく、あらゆるファイルタイプで動作できます。 PurifyCSSは、ファイル内のすべての単語を調べ、CSSのセレクターと比較することで機能します。すべての単語はセレクターと見なされます。つまり、多くのセレクターを誤って使用すると考えることができます。たとえば、CSSのセレクターに一致する単語が段落にある場合があります。

そのため、それも覚えておいてください。潜在的なセレクターの一致を比較する方法は馬鹿げており、これは賢くて危険です。

UnusedCSSはあなたのためにあなたのサイトをcraうオンラインサービスです

あらゆる角度からサイト上のすべてのページを見るためのツールを手動で構成することは確かに雑用であり、コードベースが進化するにつれて日々同期する必要があります。興味深いことに、オンラインサービスUnusedCSSは、あなたが与えた単一のURLに基​​づいてサイト自体をrawっていることにより、この負担を克服しようとします。

私は有料サービスにサインアップし、CSS-Tricksでそれを指摘しました。私は、結果を一目見ただけで、それは私にとってより正確だと感じています：

また、クリーン化されたファイルをダウンロードし、実際に必要/望んでいないセレクターをチェック/チェックするなど、多くのカスタマイズを提供することができます（たとえば、必要としないと思われるクラス名が表示されますが、実際にそれを必要とすることは確かです）。

オンラインクロールサービスの精度が向上しましたが、多くの騒音がありました。また、実際に日々のビルドおよびリリースプロセスに実際に組み込む方法もわかりません。

ツーリングは通常、後処理後に使用されます

CSSが少ないかSASSで構築されているとし、ポストプロセッサを使用してCSSにコンパイルするとします。おそらく、他のCSSの前処理の最後に、自動化された未使用のCSSクリーニングを組み込むことでしょう。のように…

1. サス
2. postcss / autoprefixer
3. [未使用のCSSをきれいにする]
4. 生産CSS

それはどちらも理にかなっており、私にとって少し面白いです。未使用のCSSを生成するスタイリングを実際に修正しません。代わりに、ビルドの最後に拭き取るだけです。 JavaScriptはしばらくの間、木が揺れているのでそのようなことをしているので、先例がありますが、CSSコードベースは非常に直接実践的であるため、まだ奇妙に感じます。このセットアップは、無理にペナルティがないため、どこにでもCSSを捨てることをほぼ奨励します。 CSSがどのように適用および使用されるかを理解するためのインセンティブを削除します。

Purgecssは、明示的な入力を取得し、結果を提供する別のツールです

Purgecssは、未使用のCSS市場の別のプレーヤーです。私がそれについて気に入っている1つの接線は、それが他のツールとどのように異なるかを明確に説明することです。たとえば、PurifyCSSと比較して：

PurifyCSSの最大の欠陥は、モジュール性の欠如です。ただし、これも最大の利点です。 PurifyCSSは、HTMLまたはJavaScriptだけでなく、あらゆるファイルタイプで動作できます。 PurifyCSSは、ファイル内のすべての単語を調べ、CSSのセレクターと比較することで機能します。すべての単語はセレクターと見なされます。つまり、多くのセレクターを誤って使用すると考えることができます。たとえば、CSSのセレクターに一致する単語が段落にある場合があります。

Purgecssは、抽出器を作成する可能性を提供することにより、この問題を修正します。抽出器は、ファイルのコンテンツを取得し、その中で使用されるCSSセレクターのリストを抽出する関数です。これにより、未使用のCSSを完全に除去できます。

Purgecssは現時点では大きな犬のようです。多くの人がそれを使用し、それについて書いています。

• Nghia Phamは、特にBootstrapで使用する方法について書きました。
• Greg Kohnは、ホワイトリストとの異常な状況でセレクターを削除しないという投稿の警告を書きました。
• Flavio Copesは、NPMスクリプトとPostCSSでそれを実行することについて書きました。
• サラ・ダヤンは、Tailwindでどのように機能するかを注意深く詳しく説明しています。

Purgecsは、Tailwindで作業するために特別な構成が必要ですが、TailwindとPurgecsはポッドの2つのエンドウ豆のようです。実際、彼らのドキュメントはそれらを一緒に使用することを推奨し、ビルドプロセスでそれを使用するためのCLIを提供します。

私はそれの要点はこれだと思います：Tailwindは、ユーティリティセレクターでいっぱいのこの大きなCSSファイルを生成します。しかし、彼らはあなたがすべてを使うつもりはありません。 HTMLでこれらのユーティリティセレクターを使用してすべてのスタイリングを行い、Purgecssを使用してすべてのHTMLを調べ、生産CSSの未使用のユーティリティセレクターを揺さぶります。

それでも、サードパーティのリソースに依存しているものを手動で構成し、データストアから生じるデータをビルドプロセス中に見ることができず、手動で説明するものにすることができないことを知っている間、あなたのサイト上のすべてのテンプレート（JavaScript、HTMLなど）についてそれを教えることは、継続的なメンテナンスの問題になります。

私のお気に入りのテクニック：CSSコードベースに本当に精通している人に問題を認識し、時間の経過とともに修正することを目指してください

おそらく、これは時代に到達する必要がある昔ながらのアプローチのように感じますが、ちょっと、これは私にとって最も実用的なアプローチのように感じます。この問題はとても難しいので、私はそれに対する努力が答えだと思います。それは問題を理解し、時間の経過とともに解決策に向けて取り組んでいます。フロントエンドに密接に関与しているフロントエンドの開発者は、CSSランドで何が使用され使用されているかについて理解し、それを削ることができます。

私が見た極端なテストアプローチは、CSSブロックで（つまり、background-image：url（/s-this-being-used.gif？selector）;）を使用してから、その画像がアクセスされているかどうかを確認するためにサーバーログを長時間チェックすることです。アクセスした場合、使用されました。そうでない場合、そうではありませんでした。

しかし、おそらく潜在的なツールボックスで私のお気に入りのツールはこれです：

視覚回帰テスト

あなたは、最も重要なページのすべてやそれらのページが異なる状態に操作されているように、可能な限り多くのサイトのスクリーンショットに加えて、さまざまなブラウザーと画面サイズで。これらのスクリーンショットは、Gitのマスターブランチから作成されます。

次に、ブランチがマスターに統合される前に、それらのスクリーンショットをすべて撮影し、それらをマスターのスクリーンショットと比較します。手動ではなく、プログラム的に。

それがまさにパーシーがしていることですので、これを見てください：

長年にわたって視覚回帰テストツールに他の刺し傷がありましたが、パーシーは私にとって明らかな意味がある唯一のものです。スクリーンショットを撮るだけではありません。それらを比較したいので、それらの間に視覚的な違いがわかります。違いを見たくはありません。それらを承認または不承認にしたい。また、その承認がブロックまたはマージを許可することを望んでおり、スクリーンショットを取得する前にブラウザを制御できるようにしたいと考えています。比較画像を手動で更新したくありません。それはすべてパンとバターの透過性です。

完全な開示：パーシーは、上記のビデオを含めて以前にCSS-Tricksでここで物事を後援しましたが、この投稿ではありません。

原子CSSおよびCSS-in-JSとの関係

これを読んでいる人がたくさんいると思います。私は使用しているツールが必要な正確なCSSを生成し、それ以上何も生成しないため、未使用のCSSを持っていません。

ねえ、それはちょっとクールです。

たぶんそれはアトマイザーです。たぶんそれはあなたがUNCSSを駆け抜けるタチョンであり、あなたはそれについて非常に注意しています。たぶん、それは今すべての怒りであるTailwind Purgecssのコンボです。

たぶんあなたは他の方法でスタイルに取り組むでしょう。 JavaScriptコンポーネントとスタイルを反応や感情など、CSSモジュールを使用するだけで、未使用のCSSを使用するだけでも、CSS-in-JSの利点です。また、多くのJavaScriptベースのビルドプロセスでツリーシェーキングとコードスプリッティングが登場するため、CSSが少ないだけでなく、現時点で必要なものだけをロードするだけです。ただし、これらすべてにトレードオフがあります。

将来のプロジェクトで未使用のCSSをどのように避けますか？

スタイリングの未来は、グローバルスタイルとコンポーネントスタイルの意図的な分裂だと思います。ほとんどのスタイルはコンポーネントにスコープされていますが、カスケードを明確に活用するグローバルなスタイリングの選択肢があります（グローバルタイポグラフィのデフォルトなど）。

ほとんどのスタイリングがコンポーネントにスコープされたままにしている場合、HTMLの小さなブロックと互いに直接関係するCSSの小さなブロックに心を包むのがはるかに簡単であるため、未使用のスタイルが蓄積する機会は少ないと思います。コンポーネントが死亡または進化すると、スタイリングが死んだり進化したりします。 CSSバンドルは、実際に使用されるコンポーネントから作られています。

CSS-in-JSソリューションは、スタイルがコンポーネントにバインドされるため、この方向に自然に向かいます。それが主なポイントです。しかし、それは必須ではありません。私はCSSモジュールの一般的なアプローチが好きです。これは、スタイルスコーピングのためにほぼ完全に行われ、特定のJavaScriptフレームワークを使用することを義務付けていません。

それが理論的または到達していないように見えるすべてであり、そのすべてのブートストラップCSSのサイズを縮小しようとしているブートストラップサイトを持っている場合は、最終的なデフォルトの分散バンドルの代わりにソースからブートストラップを使用することをお勧めします。ソースはSCSSであり、多数の高レベルに含まれるものから構築されているため、ブートストラップの特定の部分が必要ない場合は、それらを削除できます。

頑張って、ギャング。

以上がサイトから未使用のCSSをどのように削除しますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。