10

コンソールログを追加したり、デバッグしたり削除したりして問題が発生するかどうかを確認することなく、Webページで使用されていないJavaScriptファイルを見つけることは可能ですか？

ツール、コマンドラインスクリプト、Firefoxプラグインなどを探しています。

たとえば、これらがヘッダーに含まれているとします。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/something.js"></script>

このページでは、、、およびの関数に対してのみ呼び出しが行わfunctions.jsれvalidation.jsますjquery.js。something.js使用されていないため、ヘッダーから安全に削除できることをどのように知ることができますか？

FireBug、chromeのコンソール、yslow、サーバーログなどをルート化しようとしましたが、これらはすべて、ロードされたスクリプト、つまり、使用されたスクリプトではなく、すべてのスクリプトを教えてくれます。

4

4 に答える 4

4

JavaScriptで物事を呼び出し、拡張し、参照する方法はたくさんあるので、単純な「このファイルは使用中/未使用」の検出メカニズムはありません。

関数を呼び出す方法は数十あります。たとえばclick、要素、eval()ステートメントの場合...スクリプトファイル内の既存のクラスのプロトタイプを拡張することができます...など。また、次の方法で新しいマークアップをフェッチすることもできます。 AJAXは、特定のインクルードから関数を参照するよりも、コンテンツをフェッチせずに自動的にテストすることは不可能です。

誰かがこれに正確に取り組むツールを思い付かない限り（私はそれが不可能だと言っているのではなく、それがひどく難しいというだけです）私はこれを良いIDEと検索機能で手動で解決することがそれを行うための最良の方法だと思います。

于 2010-06-23T08:34:18.303 に答える
1

7年後の私自身の質問への回答として、Chrome開発ツールにはまさにこの機能が搭載されています。https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

于 2017-07-02T17:07:06.297 に答える
1

たった7年しかかかりませんでした:)また、Navaliaでこれを自動化できることを指摘したいと思います：https ：//github.com/joelgriffith/navalia 。

簡単な例を次に示します。

import { Chrome } from 'navalia';
const chrome = new Chrome();

async function checkCoverage() {
  await chrome.goto('http://joelgriffith.net/', { coverage: true });
  const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js');
  console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 }
  chrome.done();
}

checkCoverage();

詳細はこちらhttps://joelgriffith.github.io/navalia/Chrome/coverage/。

于 2017-07-09T02:56:06.650 に答える
0

別の方向からこれに目を向けると、（遅延）読み込みjavascriptライブラリの使用を検討できます。これがあなたの状況にどれほど適切であるかは言えませんが、先週、これら2つの言及を見ましたが、どちらも使用していません。

于 2010-06-23T08:42:29.347 に答える