這篇文章其實是推廣介紹我個人的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 我沒寫出來的都是自認為考慮到了，相容的很不錯的，哈哈哈
如果匹配的結果有誤，歡迎提出，也希望各位大佬給個star咯。