2017-10-20 23 views
4

使用しているCSSのうち、98.4%が未使用の19,000行のCSSファイルから抽出する必要があります。私はあなたがそうのように、CSSカバレッジを表示するには、Chromeデベロッパーツールを使用することができます知っている:ページからCSSを抽出する

enter image description here

をしかし、それはあなたも緑の線にジャンプすることはできません。手動で19K回線を経由するだけでは実現できないようです。

Chrome Lighthouseでは、以前使用していたDeveloper Toolsのようなルールだけを表示するオプションはありません。

私はFirefoxの「CSS Usage」アドオン(多くのサイトが推奨)を試しましたが、それ自体FireFoxの最新バージョンでは互換性のないFireBugが必要です。

誰かが何らかの形で使用されているCSSだけを引き出す方法はありますか?

+1

あなたはHTTを見てみましたps://github.com/purifycss/purifycss既に? –

+0

_ "しかしFireBugの最新版では互換性のないFireBugが必要です" _ - Firefoxの古いバージョンはすべてネットから完全に消去されています。 https://ftp.mozilla.org/pub/firefox/releases/のようなものしか存在しませんでした。 – CBroe

+0

私は同じ質問をしました - > https://stackoverflow.com/questions/44633247/how-to-save-the-results-analysed-by-the-chromes-coverage-tool :)あなたはもっと幸運を願って! – Morpheus

答えて

2

希望これはあなたが

https://uncss-online.com/

ちょうど右に左とCSSでHTMLを追加するのに役立ちます。 OK btnをクリックして魔法を参照してください

cssにエラーがある場合は、その行番号のエラーを削除するように求められます。

は、これは私が私のプロジェクトのいくつかのためにPurifyCSSを使用する最も簡単なMethodeの:)

+1

これはいくつかの奇妙なものを取り出したが、それはまた、いくつかの良いものを引き出した。確かにあなたが立ち往生している場合は改善。 –

2

です。 CSSを軽量に保つのに役立ちます。

いけない」あなたのプロジェクト構造とワークフローについて知っているが、チュートリアルのトンはそこにあります

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

https://survivejs.com/webpack/styling/eliminating-unused-css/

未使用のCSSを退治するためのいくつかのオンラインソリューションは、もありますしかし試したことがない:

https://uncss-online.com/

+0

ヒント:外部リンクを投稿するのではなく、実際に説明するのは、思ったよりも早く消えてしまいますので、常に説明してください。 –

+0

意味があります。私はこれを念頭に置いておきます。チャックに感謝します。 –