前端开发您现在的位置是:首页 > 博客日志 > 前端开发

如何检测和删除未使用的多余无用的css

<a href='mailto:'>微wx笑</a>的头像微wx笑 2022-06-19前端开发 1 0关键字: css  

因为是程序员,首先是想自己写一个,结果简单了搞了一下之后发现会丢失样式,然后想到不能总是想着造轮子,应该已经有这样的功能了,在网上找了很多解决方案,这里记录一下尝试结果。

如何检测和删除未使用的多余无用的cssXtX无知人生


XtX无知人生

在网上找了很多解决方案,这里记录一下尝试结果
XtX无知人生

1、chrome浏览器 F12审查元素的AuditsXtX无知人生

参考:chrome新版没有Audits,chrome浏览器开发者工具为何找不到auditsXtX无知人生


XtX无知人生

2、Firefox浏览器XtX无知人生

CSS usage插件XtX无知人生

安装了最新版本的Firefox浏览器,也没有找到CSS usage插件,也没有找到Dust-Me插件XtX无知人生


XtX无知人生

3、IntelliJ IDEA还没尝试过XtX无知人生

IntelliJ IDEA 这是一个颇强大的IDE,类似于DreamWeaver,不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。XtX无知人生


XtX无知人生

4、unused-cssXtX无知人生

尝试了一下,显示的优化效果不错,然而还试用都没有,分析完成之后想下载优化后的css文件就需要付费了。XtX无知人生


XtX无知人生

5、https://oct.cn/project/uncss XtX无知人生

这个目前免费使用,但是试用了一下,会丢失样式。这个可能与一部分内容是脚本创建的有关,所以使用的时候HTML中要包含所有情况的代码。XtX无知人生


XtX无知人生


XtX无知人生


XtX无知人生

本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.com/blog/front/2022-06-19/1261.html

很赞哦! () 有话说 ()