如何找出某些javascript代碼是否被實際使用？

我正在做一些遺留項目的JavaScript清理工作，並試圖擺脫冗餘的JS庫。我完成了所有明顯的（那些從任何地方都沒有引用的）。但是，所有頁面中都包含許多JS文件（通過切片）。如何找出某些javascript代碼是否被實際使用？

我怎樣才能找出他們是否實際使用，缺乏每個內容的搜索和搜索其中的每個功能？有沒有更聰明/更簡單的方法來做到這一點？這是一個基於Java的/ Spring項目，如果順便說一下。

2013-05-31 Ashkan Aryan

有非同小可的方式。有100％的測試覆蓋率嗎？如果是這樣，請嘗試依次移除部件並查看它們是否失敗。 – Prinzhorn

我認爲這是不可能的（自動），你必須真正理解代碼並查看生成的頁面。即使你把任何東西放在控制檯上。日誌（「我在xxx文件中」）;'不能確定JS代碼在一段時間之後不會執行某些用戶交互，或者甚至基於用戶瀏覽某些頁面時設置的某些cookie /請求參數。 – Xeon

@Pirnzhorn不幸的是，這是我這樣做的原因之一，在讓人們增加測試和提高覆蓋率之前進行一些清理！ –

我覺得有沒有簡單的方法。

您可以刪除腳本引用，在打開瀏覽器調試器的情況下運行您的站點，並查看是否有任何「找不到功能」錯誤。

但你必須在你的網站來測試每一個功能...

編輯：

現在有一個在Chrome瀏覽器開發工具的功能，可以爲你做這個：

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

1）打開命令菜單。 2）開始輸入Coverage並選擇Show Coverage。

來源

2014-07-28 16:37:26

不同意 - 有運行時開發人員工具（在Chrome中）可以幫助查找未使用的代碼。 –

現在可以，這個答案是4歲。請爲我們列出它們。 –

我建議使用間諜來完成這個任務。它們用於TDD來測試函數是否被調用，以便可以斷言調用是否真的發生。

如果你夠幸運的話，那些js庫在構造函數或其他方式初始化，如果是的話，我建議你窺探這些init函數。
如果不是，你可能想窺探所有的功能，但這很痛苦，特別是如果你有大型圖書館，在這種情況下，我會建議去一個一個。

在過去，我已經使用Jasmine或Sinon.JS此任務，如下的例子：

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

一旦你有正確的功能設置間諜那麼它應該只是如果他們檢查的事不管你打電話還是不打電話，你都可以打電話給mixpanel（想到的第一個例子）以及關於它的一些信息，以便稍後可以看到哪些功能被調用，哪些不是。

來源

2013-05-31 10:07:29

Chrome開發工具的最新更新之一現在包括一個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.

來源

2018-01-16 09:09:15

太棒了，我有點懶，看不到這個。感謝您分享此信息。 – JPReddy

這絕對是手動修剪未使用代碼的最快方法。（對於新項目，像Webpack這樣的現代構建工具提供了代碼修剪功能 - 但是將它們添加到現有項目通常需要付出更多的努力） –

你也可以給一個嘗試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]

來源

2018-01-17 10:11:52 AsifAli72090

這隻適用於css嗎？ –

是的，這隻適用於引導CSS或其他CSS文件減少。 – AsifAli72090

如何找出某些javascript代碼是否被實際使用？

回答

相關問題