页面加载时未使用哪些 javascript 文件

发布于 2024-09-06 20:25:17 字数 715 浏览 10 评论 0原文

是否可以找出网页上未使用的 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。我如何知道 something.js 未被使用，因此可以安全地从标头中删除？

我尝试过通过 FireBug、chrome 的控制台、yslow 和服务器日志等进行 root，但这些都告诉我哪些脚本已被加载，即所有脚本，而不是哪些脚本已被使用。

原文

Is it possible to find out which javascript files are NOT used on a web page without having to add console logs or debug or removing them to see if things break?

I'm looking for a tool, or a command line script or firefox plugin etc.

For example, let's say I have these included in the header:

<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>

On the page, calls are only made to functions in functions.js, validation.js and jquery.js. How can I know that something.js is not used and therefore can be safely removed from the header?

I've tried rooting through things like FireBug, chrome's console, yslow and server logs, but these all tell me which scripts have been loaded, i.e. all of them, not which ones have been used.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情独悲 2024-09-13 20:25:17

AFAIK 没有简单的“此文件正在使用/未使用”检测机制，因为 JavaScript 中有很多调用、扩展和引用事物的方法。

调用函数的方法有很多种，例如在元素的 click 事件中、eval() 语句中...您可以扩展现有类的原型另外，您可以通过 AJAX 获取新标记，而不是依次引用某个包含中的函数，这是在不获取内容的情况下无法自动测试的东西。

除非有人想出一个工具来解决这个问题（我并不是说这是不可能的，只是说它非常困难），我想说的是使用一个好的 IDE 和搜索功能手动解决这个问题是最好的方法。

回复收藏 0 原文

心房敞 2024-09-13 20:25:17

为了回答我自己 7 年后提出的问题，Chrome 开发工具现在已经有了这个功能！ https://developers.google.com/web/更新/2017/04/devtools-release-notes#coverage

回复收藏 0 原文

沧桑㈠ 2024-09-13 20:25:17

只花了 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();

Only took 7 years :) Also wanted to point out that you can automate this with Navalia: https://github.com/joelgriffith/navalia.

Here's a quick example:

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();

More here https://joelgriffith.github.io/navalia/Chrome/coverage/.

回复收藏 0 原文