web-dev-qa-db-ja.com

最適化-すべてのhtmlページに共通の未使用のCSSとJavascriptを見つけて削除する方法はありますか？

私のウェブサイトには多くのウェブページがあり、スタイルシートとスクリプトを整理しようとしています。各js/cssの約10％以上が、私のWebサイトのどのHTMLページでも使用されていません。私が必要なのは、一般的な未使用の冗長なCSSとJSを削除することです。私は少し調査をして、 this を見つけました。しかし、それは無料ではありません。
注意：

  • Js/cssのいくつかは複数のhtmlページによって呼び出されていますが、各js/cssの一部はそれらを呼び出しているhtmlページのいずれによっても使用されていません。
  • 私のウェブサイトはChromeでのみ互換性があります。
javascripthtmlcssoptimizationcode-cleanup
26
HackCode

ええ、Addy Osmaniの grunt-uncssプラグイン を使用して、未使用のCSSをクリーンアップする必要があります。 JSコードのどの部分が呼び出されるかはアプリケーションロジックに依存するため、未使用のJSを削除するツールを使用できるかどうかはあまりわかりません。

10
codeepic

Open chrome DevTools、Auditsで、現在の状態を監査するか、ページをリロードしてロード時に監査することができます

次に、Webページのパフォーマンスの下に「未使用のCSSルールを削除する」というセクションがあります

今私はそれを使用したときに、問題を使用しているCSSをリストしていることがわかりました。現在は使用されていなかったので、クラスを切り替えている場合は明らかにクラスが表示されていない場合に表示されます現在適用されています。

ところで、私が知っている限り、それが表示されない場合は、chrome canaryで動作します。また、このフラグを有効にしたかどうかも思い出せません。

6
Edwin Reynoso

http://gtmetrix.com/remove-unused-css.html でGTmetrixを使用してCSSコードをクリーンアップできます。 URLを入力してGOを押してください！

http://www.peterbe.com/plog/mincss は、URL（または複数のURL）が指定されると、そのページとそのすべてのCSSをダウンロードし、CSSの各セレクターを比較し、使用されていないものを見つけます。結果は、元のCSSのコピーですが、ドキュメントにないセレクターが削除されています。

google chrome監査ツールを使用してこのWebサイトを参照することもできます http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

または、google chrome拡張機能を使用できます

  1. https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB
3
Zain Aftab

まず第一に、完全なソリューションがあり、そのいくつかはおそらくSOで既に参照されていますが、私はそれらのいずれにも精通しておらず、多くは費用がかかりそうです。私があなたなら、「css lintをクリーンアップ」や「javascript lintをクリーンアップ」などのキーワードで検索を開始します。この目的のために自分のコードを書きません。

私があなたでなかった場合、または数時間の検索の後、私のニーズを満たすものがまだ見つからなかった場合、私はこれを自分で試してみることにします。少なくともCSSについては、汚いことを望んでいる場合にできることは、スクリプトをローカルで実行して、提供される各HTMLファイルを実行し、

  1. 参照されているすべてのスタイルシートをそれぞれから抽出し、リストを作成します
  2. すべてのCSSクラスの名前とIDをそれぞれから抽出し、リストを作成します
  3. リストを実際にHTMLで使用されるクラスおよびIDと照合します
  4. そうでないものすべてのリストを作成し、簡単にアクセスできるようにファイルに保存します

Pythonに精通していれば、おそらく数時間でこのようなものを一緒に投げることができます。もちろん、これは、迅速で汚いスクリプトに使用する言語によって異なります。

Javascriptファイルの分析は、ロジックに問題があるため、もう少し難しいでしょう。同様のことを行うことはできますが、いくつかの未使用の関数を削除するために、基本的に独自のjavascriptインタープリターを作成することは最善の利益にならない可能性があります。はい、あなたはそれをコードで行いますが、あなたは車輪を再発明するでしょう。実際に、この機能が組み込まれているIDEを調べるのは適切なアイデアかもしれません。一部は無料であり、最も重要なことは、自分で書く必要がないことです。

3
TheEnvironmentalist

Helium CSSは、Webサイトの多くのページで未使用のCSSを発見するためのjavascriptツールです。最初に、テストするページにjavascriptファイルをインストールする必要があります。次に、ヘリウム関数を呼び出してクリーニングを開始する必要があります。

[〜＃〜] cssess [〜＃〜] は、任意のサイトで使用されていないCSSセレクターを見つけるのに役立つブックマークレットです。このツールは非常に使いやすいですが、クリーンなCSSファイルを構成してダウンロードすることはできません。未使用のCSSファイルのみがリストされます。

1
rajesh

以下のリンクを使用して、HTMLコードとCSSをクリーンアップできます。

http://validator.w3.org/#validate_by_uri+with_options

0
user1584418

あなたはコードをよく知っていますが、これはあなたがそれを読むだけですべての仕事をするのに役立つはずです。 Grunt、Gulp、ブロッコリー、またはブランチを使用した春の未使用CSS

0
Willie Mwewa