web-dev-qa-db-ja.com

カバレッジレポートに基づいて未使用のJavaScriptコードを削除する

大きなjavascriptライブラリ（約40 000行のコード）と50％未満のライブラリのコードを使用するアプリケーションがあります。

ライブラリから必要なすべての機能を利用し、カバレッジレポートを作成できるテストがあります。

テストに依存するコードの未使用のすべての行をプログラムで削除する方法は？

注：カバレッジレポートには、実行された行のインデックスが含まれていますが、正確ではありません。閉じ中括弧は無視され、メソッド名が含まれている行は、メソッド本体がそうでなくても実行済みとしてマークされます。

javascriptoptimizationcode-coverageminifytest-coverage
18
Oleg Mikhailov

あなたが使用しようとすることができます：

npm install -g fixmyjs
fixmyjs <filename or folder>

これは fixmyjsプロジェクト

クリーンアップに最適なツールです。ecmascriptの一部のバージョンとの互換性が不足しているようです

8
MrMins

Closure Compiler は、かなり高度な未使用コードのクリーンアップ機能を提供します。いくつかの例：

デッドコードブロックの削除

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

function hi(name) {
    alert('Hi, ' + name);
}

hello('New user 1');
hello('New user 2');

コンパイルして：

alert("Hello, New user 1");
alert("Hello, New user 2");

hi関数を完全に取り除き、helloをインライン化します。 （ ライブデモ ）

より複雑なケースへの移行

コードが複雑になるにつれて、最適化する新しい方法が見つかります。例えば：

let greeted = 0;

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

function hi(name) {
  greeted += 1;
  alert('Hi, ' + name);
}

hello('New user ' + greeted);
hello('New user ' + greeted);

になる：

var a = 0;
function b() {
  var c = "New user " + a;
  a += 1;
  alert("Hello, " + c);
}
b();
b();

（ ライブデモ ）

ADVANCED_OPTIMIZATIONSコンパイルレベル。デッドコードの削除を有効にします。

5
user3297291

デッドコードを排除する方法は2つあり、JavaScriptビルドシステム-Webpackを使用することが可能です。

  1. デッドコードの除去（DCE）：コンパイラの最適化-プログラムで不要なものを除外します。

  2. Tree Shakingこれは逆方向に機能し、プログラムで実際に必要なものだけを含みます。

ここをクリック 詳細な設定をご覧ください。

3
Swati

いくつかのJavaスクリプト自動化ツールを使用して不要なコードを削除できます。最初に、以下のjs liblary（node must）のいずれかをインストールする必要があります。
揺れ

glifyJS2

1つのサイトにアクセスします。または、chrome dev toolsを使用して削除できます（ただし、この手順は不要なコードを特定する前に、多くのケースをテストしてください）。プロセスまたはテストケース）

chrome dev によって醜いJSコードを削除する

これは私の場合にはうまくいきました（しかし私のjsコードは10000行未満です）

2
nisar

未使用のコードをバンドルから自動的に削除するために、次のようにします。

  1. 木の揺れ
  2. Ugliyおよびuglifyjs、Terserなどの縮小ツール
  3. Googleクロージャコンパイラ（最良の結果）

ただし、未使用のアセットを見つけるために、手動で削除するには、 deadfile ライブラリーを使用できます： https://m-izadmehr.github.io/deadfile/

任意のJSプロジェクトで、未使用のファイルを簡単に見つけることができます。

設定なしで、ES6、JSX、およびVueファイル： enter image description here

1
Mojtaba Izadmehr

このアプローチは私が恐れているようには機能しません。それほど簡単ではなく、少なくとも入手可能なデータを使用することはできません。

  1. すべての必要な機能を利用するテストのカバレッジレポートは、どのカバレッジメトリックを使用していますか？すべての値、条件、およびそれらの可能な組み合わせを行使していますか？そうでない場合は、コードの一部の使用を見逃す可能性があります。

  2. カバレッジレポートが正確でない場合、削除アクションを信頼することはできません。ブレースが

ただし、十分に優れたテストスイートがあれば、コードカバレッジレポートをヒントに使用できます。未使用と報告されたコードを削除し、テストを再実行して、テストがまだ成功するかどうかを確認します。削除できるコードスニペットがなくなるまで繰り返します。

1
Harri