优化 - 有没有办法找到和删除所有 html 页面通用的未使用的 CSS 和 Javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28497156/
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
Optimization- Is there any way to find and remove unused CSS and Javascript common to all html pages?
提问by HackCode
My website has many webpages and I am trying to clean up my stylesheets and scripts. About 10% or more of each js/css are not being used by any of the html pages in my website. What I need is to remove the common unused and redundant css and js. I did a bit of research and found this. But it is not free.
NOTE:
我的网站有很多网页，我正在尝试清理我的样式表和脚本。我网站中的任何 html 页面都没有使用每个 js/css 中大约 10% 或更多的内容。我需要的是删除常见的未使用和冗余的 css 和 js。我做了一些研究，发现了这一点。但它不是免费的。
笔记：
- Some of the js/css are being called by more than one html page and still there is a portion of each js/css not being used by any of the html pages which are calling them.
- My website is only compatible in Chrome.
- 一些 js/css 被多个 html 页面调用，并且每个 js/css 的一部分仍然没有被任何调用它们的 html 页面使用。
- 我的网站仅在 Chrome 中兼容。
回答by codeepic
Yeah, you should use Addy Osmani's grunt-uncss pluginto clean up unused CSS. I am not so sure whether you can use a tool for removing unused JS, since it depends on application logic, which part of JS code will be called.
是的，您应该使用 Addy Osmani 的grunt-uncss 插件来清理未使用的 CSS。我不太确定您是否可以使用工具来删除未使用的 JS，因为这取决于应用程序逻辑，将调用 JS 代码的哪一部分。
回答by Edwin Reynoso
Open chrome DevTools, under Auditsyou can Audit the present state or reload the page and Audit on Load
打开Chrome DevTools，在审核可以审核目前的状态或重新加载页面和审核上载
Then under Web Page Performancethere's a section that says: "Remove unused CSS Rules
然后在网页性能下有一个部分说：“删除未使用的 CSS 规则
Now it when I used it, I saw that it was listing some css that I was using problem was at the present state it wasn't being used so if you're toggling classes then obviously it'll show it if the class is not currently applied.
现在，当我使用它时，我看到它列出了我正在使用的一些 css 问题是当前状态它没有被使用，所以如果你正在切换类，那么显然它会显示它如果类不是目前申请。
BTW if that doesn't show up as far as I know It works in chrome canary. Also I don't remember if I enabled a flag for this. (I don't think so)
顺便说一句，如果据我所知它没有出现，它可以在 chrome canary 中工作。我也不记得我是否为此启用了标志。（我不这么认为）
回答by TheEnvironmentalist
First of all, there are complete solutions, some of which are probably already referenced on SO, but I'm not familiar with any of them, and many are likely to cost money. If I were you, I'd start searching around with the keywords "clean up css lint" and "clean up javascript lint" or something similar. I would not go and write my own code for this purpose.
首先，有完整的解决方案，其中一些可能已经在 SO 上被引用，但我对其中任何一个都不熟悉，而且许多可能要花钱。如果我是你，我会开始搜索关键字“清理 css lint”和“清理 javascript lint”或类似的东西。我不会为此目的编写自己的代码。
Now if I weren't you or after a few hours of searching I still hadn't found anything that met my needs, I might decide to try this myself. What you could do if you're willing to get dirty, at least for the CSS, is run a script locally to run through each served HTML file and
现在，如果我不是你，或者经过几个小时的搜索，我仍然没有找到满足我需求的任何东西，我可能会决定自己尝试一下。如果你愿意弄脏，至少对于 CSS，你可以做的是在本地运行一个脚本来运行每个提供的 HTML 文件和
- Extract all of the referenced stylesheets from each, making a list
- Extract the names of all CSS classes and ids from each, making a list
- Match the list against the classes and ids actually used in the HTML
- Make a list of all those that aren't, and store it in a file for easy access
- 从每个样式表中提取所有引用的样式表，制作一个列表
- 从每个类中提取所有 CSS 类和 id 的名称，制作一个列表
- 将列表与 HTML 中实际使用的类和 ID 匹配
- 列出所有不存在的列表，并将其存储在文件中以便于访问
You could throw something like this together in Python in maybe a few hours if you're familiar with it. Of course, this depends on what language you use for quick and dirty scripting.
如果您熟悉 Python，您可以在几个小时内在 Python 中将类似的东西放在一起。当然，这取决于您使用哪种语言进行快速和肮脏的脚本编写。
Analyzing javascript files would be a bit more difficult, because of the issues with logic. You could do something similar, but it might not be in your best interests to basically write your own javascript interpreter for the purpose of cleaning out a few unused functions. Yes, you code do it, but you'd be reinventing the wheel. It might actually be a decent idea to look into IDEs that have this functionality built-in. Some are free, and most importantly, you don't have to write them yourself.
由于逻辑问题，分析 javascript 文件会更困难一些。您可以做一些类似的事情，但是为了清除一些未使用的函数而基本上编写自己的 javascript 解释器可能不符合您的最佳利益。是的，您编写代码即可，但您将重新发明轮子。研究具有内置此功能的 IDE 实际上可能是一个不错的主意。有些是免费的，最重要的是，您不必自己编写它们。
回答by Zain Aftab
You can use GTmetrix to clean up CSS code at http://gtmetrix.com/remove-unused-css.html. Give the URL and press GO!
您可以使用 GTmetrix 在http://gtmetrix.com/remove-unused-css.html清理 CSS 代码。给出 URL 并按 GO！
http://www.peterbe.com/plog/mincssis a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren't used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed.
http://www.peterbe.com/plog/mincss是一种工具，当给定一个 URL（或多个 URL）时，它会下载该页面及其所有 CSS 并比较 CSS 中的每个选择器并找出哪些不是用过的。结果是原始 CSS 的副本，但删除了文档中未找到的选择器。
you can also use the google chrome audit tool refer to this website http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/
您也可以使用谷歌浏览器审核工具参考本网站http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/
or you can use the google chrome extensions
或者你可以使用谷歌浏览器扩展
回答by rajesh
HeliumCSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
HeliumCSS 是一个 javascript 工具，用于在网站的许多页面中发现未使用的 CSS。您首先必须将 javascript 文件安装到要测试的页面。然后，您必须调用氦功能来开始清洁。
CSSESSis a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
CSSESS是一个书签，可帮助您在任何站点上找到未使用的 CSS 选择器。这个工具很容易使用，但它不会让你配置和下载干净的 CSS 文件。它只会列出未使用的 CSS 文件。
回答by Willie Mwewa
You know your code well but this should help you do all the work just read through it. Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch
您非常了解您的代码，但这应该可以帮助您完成所有工作，只需通读一遍即可。使用 Grunt、Gulp、Broccoli 或 Brunch 清理未使用的 CSS
回答by user1584418
You can use mention below link and clean your html code and css.
您可以使用下面提到的链接并清理您的 html 代码和 css。
