vue-clearcss 高效清除vue中无用的css


vue-clearcss 会找到你css中没有使用的css样式,是否删除由使用者自己决定,工作起来就像eslint

为什么要用它?

一个vue文件在长期迭代中css会越来越冗余,它不像html和js那么好删除,html你要是多了页面会展示,js你只要看下它用的地方就可以了
然而css比如scss、less都是用嵌套语法,要是你通过搜索删除那么有可能它在html有定义,但是它的上级不对,一样是无效的css,又或者有人用了bem的写法,像html上写的是a--b,但是scss写的方式是a{ &--b{} },你通过搜索的方式还不好匹配,通过这个工具,你可以快速找到无用的css

怎么用它?

使用方法非常简单

// 安装一下
 npm install -g vue-clearcss

// 然后就可以在你的项目里的控制台直接使用了,它会在控制台打印出所有无用的css,
// 支持文件和目录的方式,文件路径可以通过vscode等ide右键选择路径直接黏贴
 unvuecss ./src/App.vue

如果你用的是vscode,那么使用更加方便,在扩展里面搜索vue-clearcss-ext,安装扩展还有上面全局安装的vue-clearcss就可以了,效果如下
avatar

同类工具对比

PurgeCSS:这个工具是通过正则把所有的html单词匹配出来,然后看css里面是否有相同的元素,所以匹配不是很正确,比如说我的html里
有一个class叫aa,然后css有个id也叫aa,那么它是会通过验证的,因为html里面有这个单词aa
UNCSS:这个工具是通过jsdom的querySelector方法来实现的,但是vue不是单纯的html所以不能直接使用,官网给的建议是vue最后展现的页面再去搜索多余css,个人觉得不够好用。(我匹配css的方式就是参考了jsdom的querySelector相关源码,也是使用动态模板生成函数实现的)

不到位的地方

1 所有的伪类选择器都认为是有用的
2 所有的属性选择器 (除了[attribute] 和 [attribute=value] 可以完美过滤),其他都是使用js的includes方法来匹配,其实就是懒用的少的现在还不想兼容。。
3 过滤结果只针对该文件是无用,但有可能该css元素是用来影响子组件的,需要你自己确认,这也是为什么我不像去放入webpack加入打包的只是打印出来自己选择是否删除的原因,如果考虑到对子组件的影响,那么子组件又会嵌套自己的子组件,那么html的ast会变得非常的巨大,但是父组件影响子组件的情况又很少,所以不适合做。(其实也不推荐父组件写子组件样式,如果你写了也应该会有印象吧。)
4 动态class除了在js里赋值的情况都可以解析,例如:class='classobjinjs' 这种无法解析,(暂时除了正则还没有特别好的方法去解析字符串形式的js)
5 我没写出来的都是自认为考虑到了,兼容的很不错的,哈哈哈

如果匹配的结果有误,欢迎提出,也希望各位大佬给个star咯。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM