特定のJavaScriptコードが実際に使用されているかどうかを調べるにはどうすればよいですか？

Question

私は、従来のプロジェクトでJavaScriptのクリーンアップ作業をしており、余分なJSライブラリを取り除こうとしています。私はすべての明白なもの（どこからでも参照されていないもの）をすべて実行しました。しかし、すべてのページに（タイルを介して）含まれているいくつかのJSファイルがあります。

実際に使用されているかどうか、それぞれのコンテンツを調べることができず、それぞれの機能を検索するにはどうすればよいですか？これを行うよりスマートで簡単な方法はありますか？これは、Javaベースの/ Springプロジェクトで、それが助けになる場合です。

Answer 1

私は簡単な方法はないと思います。

スクリプトリファレンスを削除し、ブラウザデバッガをオンにしてサイトを実行し、「機能が見つかりません」というエラーがないかどうかを確認できます。

しかし、あなたはあなたのサイトにすべての単一の機能をテストする必要があります...

編集：

今、あなたのためにこれを行うことができますクロムのdevのツールに特徴があります

：

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1）コマンドメニューを開きます。 2）カバレッジの入力を開始し、カバレッジを表示を選択します。

Answer 2

私はこの作業にスパイを使用することをお勧めします。関数が呼び出されたかどうかをテストするためにTDDで使用されるため、呼び出しが実際に発生しているかどうかを確認できます。

これらのjsライブラリは、コンストラクタやその他の方法で初期化されています。もしそうなら、これらのinit関数を偵察することをお勧めします。
もしあなたがすべての機能を偵察したいと思うかもしれないが、これは特に大きなライブラリーを持っている場合には痛いです。その場合は、一つずつ行くことをお勧めします。あなたは適切な機能のスパイのセットアップを持っていたら

it('should be able to login', function() { 
    spyOn(authobj, 'isEmpty'); 
    authobj.login('abc', 'abc'); 
    expect(authobj.isEmpty).toHaveBeenCalled(); 
}); 

が、それは彼らがしているかどうかをチェックするだけの問題でなければなりません：私はこの作業のためにJasmineまたはSinon.JSを使用していた過去に

は、一例を以下の呼び出されたかどうかは、mixpanel（その最初の例は頭に来る）を呼び出すことができます。これについての情報があるので、後であなたはどの関数が呼び出され、何がないかを見ることができます。

Answer 3

chrome開発ツールの最新のアップデートの1つに、JSとCSSのカバレッジタブが含まれており、未使用のコードを見ることができます。

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Open the Command Menu. 
2) Start typing Coverage and select Show Coverage. 

Answer 4

またpurifycssに試してみることができます。

CLI usage：

$ npm install -g purify-css 

purifycss <css> <content> [option] 

Options: 
    -m, --min  Minify CSS       [boolean] [default: false] 
    -o, --out  Filepath to write purified css to     [string] 
    -i, --info  Logs info on how much css was removed 
                 [boolean] [default: false] 
    -r, --rejected Logs the CSS rules that were removed 
                 [boolean] [default: false] 
    -w, --whitelist List of classes that should not be removed 
                  [array] [default: []] 
    -h, --help  Show help           [boolean] 
    -v, --version Show version number         [boolean]