vue组件里不用的css还在搜索过滤来删除？试一下vue-clearcss吧！

这篇文章其实是推广介绍我个人的npm工具库，但你不会后悔点进来的（应该吧。。。）vue-clearcss

为什么要用它？

一个vue文件在长期迭代中css会越来越冗余，它不像html和js那么好删除，html你要是多了页面会展示，js你只要看下它用的地方就可以了

然而css比如scss、less都是用嵌套语法，要是你通过搜索删除那么有可能它在html有定义，但是它的上级不对，一样是无效的css，通过这

个工具，你可以快速找到无用的css

怎么用它？

使用方法非常简单

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

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

同类工具对比

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 我没写出来的都是自认为考虑到了，兼容的很不错的，哈哈哈

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