有没有一种有效的方法来查找未使用的JavaScript包?

9

我接手了一个非常复杂且包含许多<script src=...的页面。

我怀疑其中很多包含是没有使用的。有没有办法找出哪些是没有使用的呢?


应该为此发明一个插件!哇!肯定会很不错的! - Max Pringle
肮脏的解决方案:一个一个地删除它们并观察错误。 - Amr Elgarhy
1
所有的脚本标签都被使用了,也就是说它们都被加载了。无论它们是否必要,几乎不可能通过编程来确定,因为它们可以在不同的页面中用于不同的事情,以及后续发生的事件等。 - adeneo
不幸的是,我认为唯一找出方法的方式就是逐个注释并运行页面,看看是否有任何功能无法正常工作或导致语法错误,但如上面的评论所指出的,拥有能够检测它们的东西会很酷,但毫无疑问是没有意义的,因为浏览器必须在检查其使用情况之前加载插件/脚本,并且无法在没有服务器端的情况下修改该页面。动态修改也是无意义的,因为它仍将在删除它们之前继续加载它们。 - NewToJS
可能 JSLint 有帮助?https://dev59.com/AnM_5IYBdhLWcg3w6X1e#1169896 - Amr Elgarhy
1
可能是检测已链接但未使用的文件和未使用的JavaScript的重复问题。 - Amr Elgarhy
1个回答

10

Chrome 59引入了一个新的覆盖率工具,可以在DevTools的三个点菜单中启用。

Chrome DevTools -> Options -> More tools -> Coverage

您应该能够启用该工具,浏览网站并执行脚本操作,然后查看实际调用过的行。未被调用的文件将完全显示为红色(没有运行的行)。

编辑:如评论中所述,这仍不是一个最优的解决方案,因为它只能检测到实际运行的代码行。正如@adeneo所提到的,由于JS的复杂性,静态确定代码的哪些部分将运行几乎是不可能的。

如果这是一个旨在减少初始HTTP请求数量的XY问题,那么简单地将所有所需文件连接起来并进行缩小(HTTP/1.1),或者研究将相关资源分组并通过HTTP/2提供服务。


这是否意味着您需要尝试页面上的每个功能,甚至预测以后可能使用或不使用哪些事件? - adeneo
1
是的,可惜。然而,由于JS的极度动态性,静态确定这些代码路径是否会运行是不可能的。尽管如此,这仍然比逐个系统地删除文件更优雅。 - Scott
@Scott 是的,我也这么想。所以你可以逐个注释脚本标签,看看是否会出现语法错误,这与覆盖工具的效果相同... 覆盖工具的优点是不需要一直注释和重新加载,但需要确保所有函数都被执行。非常感谢你的建议。我一定会自己试试看。**+1** - NewToJS
@NewToJS 是的,测试过程是一样的。例如,如果一个函数只在“click”事件中调用,那么必须触发该事件,以使覆盖工具能够捕获它或错误发生。 - Scott
我确实尝试了覆盖率工具,但正如你所指出的那样,它并不足够。 - AngryHacker
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接