javascript 在 Web 项目中查找未使用的 CSS 规则和 js 脚本?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6211967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find unused CSS rule and js script in a web project?
提问by M.Azad
HI.. My project has many CSS roles and JavaScript scripts that are not used in my project. How can I find these unused files?
HI.. 我的项目中有很多 CSS 角色和 JavaScript 脚本没有在我的项目中使用。如何找到这些未使用的文件?
回答by Spudley
There is a nice little firefox plugin called Dust Me Selectors, which scans a page for CSS which isn't being used.
有一个名为Dust Me Selectors的不错的小 Firefox 插件,它扫描页面以查找未使用的 CSS。
It's a very good tool for spotting things in your stylesheets which are redundant.
这是一个非常好的工具,用于在您的样式表中发现多余的内容。
However, you still need to be careful with it, as it is quite possible for a stylesheet to be unused when you run the program, but still necessary for your site - ie it could be used for dynamic content, or for other pages which share the same stylesheet code, etc.
但是,您仍然需要小心使用它,因为在您运行程序时很可能没有使用样式表,但对于您的站点来说仍然是必需的 - 即它可以用于动态内容,或用于共享的其他页面相同的样式表代码等。
[EDIT]
[编辑]
I've removed my previous edit where I noted that this project might have been abandoned, because in fact it looks like it's back in active development. Good news all round.
我已经删除了我之前的编辑,我注意到这个项目可能已被放弃,因为实际上它看起来像是回到了积极的开发中。好消息四面八方。
回答by T.J. Crowder
When I've needed to do this, I've used the search feature of the dev environment to search all files in the solution for the filename of the file I suspected wasn't used. If it didn't get found, or got found only within the file itself, I knew it wasn't used, since the files have to be referenced (via a script
or link
element, or in a script that combines and minifies them) to be used.
当我需要这样做时,我使用了开发环境的搜索功能来搜索解决方案中的所有文件,以查找我怀疑没有使用的文件的文件名。如果没有找到它,或者只在文件本身中找到它,我知道它没有被使用,因为必须引用文件(通过script
或link
元素,或在组合和缩小它们的脚本中)才能被引用用过的。
Of course, if you're building filenames up from component parts, that won't work. For instance, if you have code with a variable basename
containing "foo" and then code outputting a script tag like:
当然,如果您从组件部分构建文件名,那将不起作用。例如,如果您的代码包含一个basename
包含“foo”的变量,然后代码输出一个脚本标记,如:
<script src="<%=basename%>-bar.js"></script>
...then my search for "foo-bar.js" won't find it. If that's a real possibility in your code, you'll have to find all the script
and link
elements and check them yourself...
...然后我搜索“foo-bar.js”将找不到它。如果您的代码中确实有这种可能性,您将必须找到所有script
和link
元素并自己检查它们......
...or experiment: Deploy your solution, and on the server, delete each file you think might not be used, refresh on the browser, and look for 404s in the console.
...或实验:部署您的解决方案,并在服务器上删除您认为可能不会使用的每个文件,在浏览器上刷新,并在控制台中查找 404。
...all of which relates to unused files. If you think the files are referenced, but their contents aren't used, you'll either need to selectively remove the references and see what breaks (blech, a manual and error-prone process) or you'll need a code coverage analysis tool. This question here on StackOverflowdiscusses code coverage analysis tools for JavaScript, and Spudley's answerhere points to a "code coverage" (for lack of a better term) tool for CSS.
...所有这些都与未使用的文件有关。如果您认为这些文件被引用,但它们的内容没有被使用,您要么需要有选择地删除引用并查看有哪些中断(blech,一个手动且容易出错的过程),或者您需要进行代码覆盖率分析工具。StackOverflow 上的这个问题讨论了 JavaScript 的代码覆盖率分析工具,Spudley在这里的回答指向CSS 的“代码覆盖率”(因为没有更好的术语)工具。