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

Question

我正在开发一个所见即所得的动画编辑器，用于设计 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 页面的交互式报告的完整屏幕截图。