web-dev-qa-db-ja.com

デッドJavaScriptコードを見つけますか？

レガシーWebアプリをリファクタリングし、その結果、かなり多くのJavaScriptコードを「殺し」ますが、確信がないためにデッドコードと思われるものを削除することを恐れています。 JavaScriptでデッドコードを確実に識別するためのツール/テクニックはありますか？

javascriptrefactoringdead-code
59
JoelFan

grepがあります。関数呼び出しを見つけるために使用します。 dostuff()というメソッドがあるとします。プロジェクトのルートディレクトリでgrep -r "dostuff()" * --colorを使用します。定義以外のものを見つけない限り、安全に消去できます。

ack は、grepの注目すべき代替手段でもあります。

11
Júlio Santos

複雑すぎるものを探すことなく：

  • JSLint （実際には静的アナライザーではありませんが、連結された開発コードを渡すと、少なくとも明らかなスコープコンテキストで、どのメソッドが呼び出されないかがわかります）
  • Google Closure Compiler
  • Google Closure Linter
9
haylem

コードで「eval」を使用している場合、コードがどこかであいまいな方法で文字列を組み立てて評価せず、デッドコードを呼び出していることを保証するのは非常に困難です。 （そして、本当に厄介なものは、evalを含む文字列でevalを呼び出すかもしれません...）。

また、コードからのoutsideからの呼び出しについても心配する必要があります。多くのWebページはHTMLの「オン」属性を使用してJavaScriptコードを呼び出します。

したがって、あなたがする必要があるのは、死んでいるように見えるメソッド/宣言を見つけ、すべてのeval呼び出しを見つけて吟味し、すべての「オン」属性を見つけて吟味することです。

他の人が示唆したようにテストカバレッジを使用することは、デッドコードの可能性のある最初のリストを取得する方法です。死んでいる可能性のある候補を排除するために、できるだけ多くの機能を実行することは明らかです。その後、残りの候補を検索して、コードに呼び出しがあるかどうかを確認します。評価とイベントを見つけることは、そのようなことをコードで検索することです。

Grepはおそらく機能しますが、名前のリストを1つずつ調べ、正しい検索を入力し、出力から誤検出ではないものを推測し、エディターで1つずつ検査するのは苦痛かもしれません。

SDソースコード検索エンジン（SCSE） をご覧ください。さまざまなタイプのHTMLページやJavaScriptを含む多くの言語に対して言語固有の検索を実行できます。 SCSEを簡単に制限して、残りの候補および/またはevalのJavaScriptコードの関数呼び出しのみを検査し（コメントや文字列を無視するなど）、HTMLページの「on *」属性のみを検査する（例： HTMLページ内の他のすべてのテキストを無視します）。 GUIを使用して、検索クエリを受け入れ、ヒットを表示し、ヒットを含むソーステキストをプルアップして簡単に検査できるようにします。必要に応じて、ヒット時にエディターに移動します。

静的解析ソリューションには、コードを解析し、どの名前がどのエンティティを参照しているかを判断できるツールが必要です。範囲が重要です。次に、動的オブジェクト構造とそれらの厄介な評価を法として、コードを通るもっともらしい実行パスを決定できる必要があります。このためには、かなり洗練されたエンジンが必要であり、誰かがたまたまこれを横になっている場合を除き、おそらくエンジニアリングが必要です。

DMS Software Reengineering Toolkit はまさにそのようなエンジンであり、完全なJavaScript（およびHTML）パーサーを備えています。 JavaScriptでこれにDMSを使用したことはありませんが、DMSを使用してJavaのようなデッドコードリムーバーを作成しました。Javaコード、また、クラス、メソッド、およびフィールドの「死んでいるように見える」リスト（死の推移的閉包を含む：クラスAが死んでBを参照する場合、Aの参照はBへの実際の参照としてカウントされません） andすべての「死んだ」ものが削除されたコードの修正バージョン。レポートを信じるかどうかを決定します。そうする場合は、コードを保持しますそうでない場合は、コードを修正して、明らかに死んでいるものが死んでいないことを確認し、再度実行します。

8
Ira Baxter

WebStorm IDEは、プロジェクト内のデッドコードと未使用の変数を強調表示できます。

7
Sukhanov Niсkolay

コードオプティマイザーは Google Closure Compiler として使用できますが、コードの最小化によく使用されます。

function hello(name) {
alert('Hello, ' + name);
}

function test(){
alert('hi');
}

hello('New user');

結果として

alert("Hello, New user");

例えば。

もう1つできることは、Chromeの開発者ツール（またはFirebug）を使用してすべての関数呼び出しを表示することです。 Profilesで、時間の経過とともに呼び出される関数と呼び出されない関数を確認できます。

DT Profiles

6
Harmen

Chromeには、開発者がコードカバレッジ、つまりどのコード行が実行されたかを確認できる新しい機能があります。

これは確かにワンストップソリューションではありませんが、開発者がコードの洞察を得るための支援の手を広げることができます。

これを確認してください link 詳細

Chrome 59リリースの一部としてロール

tools

4
Nirus

これを自動化する場合は、 https://github.com/joelgriffith/navalia をご覧ください。これにより、自動APIが公開されます。

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

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

詳細： https://joelgriffith.github.io/navalia/Chrome/coverage/

2
browserless