优化 - 有没有办法找到并删除所有html页面共有的未使用的CSS和Javascript?

时间:2015-02-13 10:13:22

标签: javascript html css optimization code-cleanup

我的网站有很多网页,我正在尝试清理我的样式表和脚本。每个js / css中约有10%或更多未被我网站上的任何html页面使用。我需要的是删除常见的未使用和冗余的css和js。我做了一些研究,发现this。但这不是免费的 注意:

  • 一些js / css被多个html页面调用,但仍然有一些js / css的一部分没有被任何调用它们的html页面使用。
  • 我的网站仅与Chrome兼容。

7 个答案:

答案 0 :(得分:10)

是的,你应该使用Addy Osmani的grunt-uncss plugin来清理未使用的CSS。我不确定你是否可以使用工具删除未使用的JS,因为它依赖于应用程序逻辑,将调用JS代码的哪一部分。

答案 1 :(得分:6)

打开Chrome DevTools ,在审核下,您可以审核当前状态或重新加载页面并审核加载

然后在网页效果下,有一节说明:"删除未使用的CSS规则

现在,当我使用它时,我看到它列出了一些我正在使用的问题问题是在目前状态下它没有被使用所以如果你正在切换课程,那么很明显它&#39 ;如果当前没有应用该类,则显示它。

顺便说一句,如果根据我的意思,它并没有出现它在铬金丝雀中起作用。另外,我不记得我是否为此启用了标志。 (我不这么认为)

答案 2 :(得分:3)

首先,有完整的解决方案,其中一些可能已在SO上引用,但我不熟悉它们中的任何一个,而且很多都可能需要花钱。如果我是你,我会开始搜索关键词“清理css lint”和“清理javascript lint”或类似的东西。为此,我不会去编写自己的代码。

现在,如果我不是你,或者经过几个小时的搜索,我仍然没有找到满足我需求的东西,我可能会决定自己尝试一下。如果你愿意变脏,至少对CSS来说,你可以做的是在本地运行一个脚本来运行每个提供的HTML文件和

  1. 从每个样式表中提取所有引用的样式表,制作列表
  2. 从每个类中提取所有CSS类和ID的名称,制作列表
  3. 将列表与HTML中实际使用的类和ID匹配
  4. 列出所有不包含的内容,并将其存储在文件中以便于访问
  5. 如果您熟悉它,可能会在几个小时内在Python中抛出这样的东西。当然,这取决于您使用何种语言进行快速而肮脏的脚本编写。

    由于逻辑问题,分析javascript文件会有点困难。你可以做类似的事情,但基本上编写你自己的javascript解释器以清除一些未使用的函数可能不符合你的最佳利益。是的,你代码做了,但你要重新发明轮子。查看具有内置此功能的IDE实际上可能是一个不错的主意。有些是免费的,最重要的是,你不必自己写。

答案 3 :(得分:3)

您可以使用GTmetrix清除http://gtmetrix.com/remove-unused-css.html处的CSS代码。提供URL并按GO!

http://www.peterbe.com/plog/mincss是一个工具,当给定一个URL(或多个URL)时,下载该页面及其所有CSS,并比较CSS中的每个选择器,并找出哪些未被使用。结果是原始CSS的副本,但删除了文档中未找到的选择器。

您还可以使用Google Chrome审核工具参考此网站http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

或者您可以使用Google Chrome扩展程序

  1. https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB

答案 4 :(得分:1)

Helium CSS是一个javascript工具,用于在网站上的许多页面中发现未使用的CSS。首先必须将javascript文件安装到要测试的页面。然后,您必须调用氦气功能来开始清洁。

CSSESS是一个书签,可以帮助您在任何网站上找到未使用的CSS选择器。该工具非常易于使用,但它不允许您配置和下载干净的CSS文件。它只会列出未使用的CSS文件。

答案 5 :(得分:0)

你很了解你的代码,但这应该可以帮助你完成所有的工作。 Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

答案 6 :(得分:0)

您可以使用下面提到的链接并清理您的HTML代码和CSS。

http://validator.w3.org/#validate_by_uri+with_options