vue-clearcss⾼效清除vue中⽆⽤的css
会到你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就可以了，效果如下
同类⼯具对⽐
PurgeCSS：这个⼯具是通过正则把所有的html单词匹配出来，然后看css⾥⾯是否有相同的元素，所以匹配不是很正确，⽐如说我的html⾥
有⼀个class叫aa，然后css有个id也叫aa，那么它是会通过验证的，因为html⾥⾯有这个单词aa
UNCSS：这个⼯具是通过jsdom的querySelector⽅法来实现的，但是vue不是单纯的html所以不能直接使⽤，官⽹给的建议是vue最后展现的页⾯再去搜索多余css，个⼈觉得不够好⽤。（我匹配css的⽅式就是参考了jsdom的querySelector相关源码，也是使⽤动态模板⽣成函数实现的）
不到位的地⽅
1 所有的伪类选择器都认为是有⽤的
css 属性选择器2 所有的属性选择器 (除了[attribute] 和 [attribute=value] 可以完美过滤)，其他都是使⽤js的includes⽅法来匹配，其实就是懒⽤的少的现在还不想兼容。。
3 过滤结果只针对该⽂件是⽆⽤，但有可能该css元素是⽤来影响⼦组件的，需要你⾃⼰确认，这也是为什么我不像去放⼊webpack加⼊打包的只是打印出来⾃⼰选择是否删除的原因，如果考虑到对⼦组件的影响，那么⼦组件⼜会嵌套⾃⼰的⼦组件，那么html的ast会变得⾮常的巨⼤，但是⽗组件影响⼦组件的情况⼜很少，所以不适合做。（其实也不推荐⽗组件写⼦组件样式，如果你写了也应该会有印象吧。）
4 动态class除了在js⾥赋值的情况都可以解析，例如:class='classobjinjs' 这种⽆法解析，（暂时除了正则还没有特别好的⽅法去解析字符串形式的js）
5 我没写出来的都是⾃认为考虑到了，兼容的很不错的，哈哈哈
如果匹配的结果有误，欢迎提出，也希望各位⼤佬给个star咯。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。