哪些javascript文件未在頁面加載時使用

Question

是否有可能找出哪些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中的functions.js 。 我如何知道something.js未被使用，因此可以安全地從標題中刪除？

我已經嘗試過像FireBug，chrome的控制台，yslow和服務器日志這樣的東西，但這些都告訴我哪些腳本已經加載，即所有腳本，而不是哪些腳本已被使用。

Answer 1

AFAIK沒有簡單的“這個文件正在使用/未使用”的檢測機制，因為有很多方法可以在JavaScript中調用，擴展和引用。

調用函數有很多種方法，例如在元素的click事件中， eval()語句......你可以在腳本文件中擴展現有類的原型......等等。你也可以通過AJAX獲取新標記而不是從某個包含引用函數，這是不可能在不獲取內容的情況下自動測試的。

除非有人提出了一個解決這個問題的工具（我不是說這是不可能的，只是它非常困難）我會說用一個好的IDE和搜索功能手動完成它是最好的方法來解決它。

Answer 2

為了回答7年后我自己的問題，Chrome開發工具現在擁有這個功能！ https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 3

只花了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/ 。

Answer 4

從不同的方向來看，您可以考慮使用（懶惰）加載JavaScript庫。 我不能說這對你的情況有多合適，但我在上周看到過這兩個，但沒有使用其中任何一個：

• http://plugins.jquery.com/project/lazy （僅用於延遲加載jQuery插件？）
• http://labjs.com/ （不確定這是否會延遲加載？）