javascript - 报告所有使用的 Javascript 函数

Question

我正在开发一个 WYSIWIG 动画编辑器，用于设计包含很多依赖项的 slider /广告横幅，这也意味着很多额外的臃肿代码从未使用过。我希望运行一份代码报告，帮助我识别重要的事情。我有几个很酷的开始，它们将通过 javascript 搜索所有函数并按部分返回每个函数: https://regex101.com/r/sXrHLI/1

然后一些 PHP 将按大小对其进行排序: Sort preg_match_all by named group size

我们的想法是，通过识别未使用的大型函数，我们可以删除它们。我的下一步是确定在文档加载时调用哪些函数的函数树，然后在单击/鼠标悬停等操作时加载和调用哪些函数。

虽然我有这个方便的函数可以告诉我加载到 DOM 中的所有函数，但这还不够:

var functionArray;
$(document).ready(function(){
    var objs = [];
    for (var obj in window){
        if(window.hasOwnProperty(obj) && typeof window[obj] === 'function') objs.push(obj);
    };
    console.log(obj));
});

我正在寻找一种解决方案，我可以使用它在 PHP/shell 中编写脚本来模拟页面加载 - 现在这里是我对术语的了解让我失望的地方，我是否正在寻找“调用堆栈”，我是否需要时间线，解释器、框架、引擎还是解析器？

接下来我需要在所有元素上模拟点击/悬停事件，或者在所有匹配正则表达式的元素上模拟点击/悬停事件:

(?|\$\(['"](\.\w*)["']|getElementsByClassName\('(\w*)'\))
(?|\$\(['"](\#\w*)["']|getElementsById\('(\w*)'\))

找到任何触发函数的事件，这样我就可以制作一个需要包含在最终代码中的函数的主列表。

Answer 1

我在观看一位 Google 开发人员的演讲时想到了您的帖子。以下链接有more intel on Dev Tools Coverage Profiler , 但下面是高层。

Google 开发工具提供了一个简洁的功能，用于生成有关已使用和未使用的 JS 和 CSS 代码的报告——这正是您要搜索的内容的本质(只是一种稍微不同的媒介——它是一个有点难以自动化，但我相信它包含了您正在寻找的内容)。

打开开发工具，然后打开左下角的椭圆(见图)，然后单击录制按钮 [见图 1]。完成您要捕获的步骤。您将获得一个交互式屏幕，您可以在其中浏览所有代码并查看已使用的内容(绿色)和未使用的内容(红色)[见图 2]

图 1 - 椭圆下拉以获取覆盖工具

图 2 - 编辑此帖子时此 StackOverflow 页面的交互式报告的完整屏幕截图。