这篇文章其实是推广介绍我个人的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咯。

vue组件里不用的css还在搜索过滤来删除?试一下vue-clearcss吧!的更多相关文章

  1. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  2. vue组件里定时器销毁问题

    我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...

  3. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  4. 新项目的vue组件

    项目地址:http://pan.baidu.com/s/1qYIxCXu 很久没有写博客的原因的是之前一直在解决一个问题,这个问题就是:我们在写组件的时候,官方推荐把css写在组件里面,但是如果我们写 ...

  5. vue组件name的作用小结

    我们在写vue项目的时候会遇到给组件命名 这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 ? 1 2 3 export default {    name:'xxx' } 1. ...

  6. Laravel 如何在blade文件中使用Vue组件

    Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...

  7. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  8. [vue]组件最佳实战

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  9. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

随机推荐

  1. Appium - adb命令操作

    1.Android 调试桥adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调 ...

  2. jmeter测试流程整理

    背景 整理jmeter脚本编写流程,注意事项,常用组件,常见问题. 参看链接:https://www.cnblogs.com/pwj2lgx/p/10282422.html 参看:processOn思 ...

  3. 第十篇 -- 学习C++宝典2005版

    最近看了C++宝典,看时间是2005的,对于里面的程序自己也进行了编写,由于时间过久,可能有些函数的用法发生了改变,自己也对其进行了修改,用VS2017可以编译通过. 前四章学习内容 CPlusPlu ...

  4. mysql查看当前连接数

    show status like 'Threads%';   需要root权限才能看到所有的连接

  5. SAS启动时自动执行代码

    有时候我们希望SAS启动时自动执行已经编写好的程序,可以按照以下方法实现: 首先正常打开SAS,编写我们想要让SAS启动时自动执行的代码,例如获取桌面文件夹路径,以便在其他程序中引用这个路径. pro ...

  6. RESTful API 设计风格

    HTTP常用动词 GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE):在服务器新建一个资源. PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源). ...

  7. 离线webpack创建vue 项目

    参考地址: https://blog.csdn.net/feinifi/article/details/104578546 画重点: // 需要带上参数--offline表示离线初始化. --offl ...

  8. 华为eNSP基础入门-配置SSH远程登录

    eNSP 华为模拟器ensp (Enterprise Network Simulation Platform) 是华为官方推出的一款强大的图形化网络仿真工具平台,主要对企业网路由器.交换机.WLAN等 ...

  9. 第5篇-调用Java方法后弹出栈帧及处理返回结果

    在前一篇 第4篇-JVM终于开始调用Java主类的main()方法啦 介绍了通过callq调用entry point,不过我们并没有看完generate_call_stub()函数的实现.接下来在ge ...

  10. 算法竞赛中的常用JAVA API :HashSet 和 TreeSet(转载)

    算法竞赛中的常用JAVA API :HashSet 和 TreeSet set set容器的特点是不包含重复元素,也就是说自动去重. HashSet HashSet基于哈希表实现,无序. add(E ...