zoukankan      html  css  js  c++  java
  • 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咯。

  • 相关阅读:
    Centos7.3安装和配置Tomcat8
    Centos7.3安装和配置jre1.8
    -bash: /home/java/jdk1.8.0_221/bin/java: 权限不够
    Centos7安装vsftp服务
    CENTOS之文件搜索命令Find
    Centos之文件搜索命令locate
    DockerFile体系结构(保留字指令)
    DockerFile解析
    SpringBoot项目映射
    穿透,让你不再限制内网的约束【远程控制内网电脑】【3389端口】
  • 原文地址:https://www.cnblogs.com/wzcsqaws/p/15208349.html
Copyright © 2011-2022 走看看