如何分析跨多个页面/站点的JavaScript和CSS覆盖率



Chrome开发工具JavaScript和CSS覆盖抽屉非常整洁,除了一件事。。。如果它可以保持打开状态,而不是在页面之间重新启动分析,那就太好了。

我希望能够分析整个网站、页面子集或一组网站,并在其中找到未使用的内容。

我知道这意味着浏览整个项目,使用每一个功能(或设置测试(都要彻底/准确,但这并不像我在没有这样的实用程序/功能的情况下所做的那样乏味。(从一次不彻底的审计中获得可用的或初始的观察结果似乎不需要一丝不苟。DevTools实用程序本身也不利于自动化测试。(

有争议的代码库是巨大的(前端未压缩190 MB(,(可能(是由许多开发人员贡献的,他们可能留下了遗迹、遗留代码或放弃了依赖关系。可能还有一些代码只与部分项目相关,这可能揭示减少依赖范围的机会。

有没有一种方法可以在不费力手动深入研究的情况下开始破解代码使用?

当我了解到谷歌的覆盖实用程序时,我首先想到的是这一点,我认为它能够集体分析多个页面,但事实并非如此。

还有什么能做到这一点吗?是否存在可以搜索整个网站或多个页面并找到未使用的JS和CSS的实用程序?

旁注:CSS在SASS中。出于这个原因和其他原因,我可能需要手动分析结果并改进代码,这相对来说是微不足道的,所以我不想寻找自动化代码改进的功能。JS也有类似的情况,它被缩小了。

这不是对产品/软件的推荐请求。它询问任务X是否可能,从技术上讲,任务X可以用"是"或"否"回答

更新:看起来确实有CSS的实用程序,但仍然没有找到JS的实用程序。

对于静态分析

  1. 尝试unusedcs.com来分析整个网站上未使用的CSS代码。更多-Helium CSS
  2. 试试deadfile,它是一个简单的工具,可以在任何JavaScript项目中查找死代码和未使用的文件

对于死代码删除

  1. 尝试purgecss从项目中删除未使用的CSS代码
  2. 试试谷歌的闭包编译器,它解析你的JavaScript,分析它,删除死代码,重写并最小化剩余的代码

也就是说,检测未使用的代码是一个很难解决的问题,因为有无数种方法可以调用给定的代码。因此,明智地使用这些工具,并根据您的最佳判断。

最新更新