Uncss - 在线去除无用css工具。一键精简无引用的样式

最新推荐文章于 2024-04-29 21:14:52 发布
最新推荐文章于 2024-04-29 21:14:52 发布
阅读量2.6k 收藏 4
点赞数 2
文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34304065/article/details/118754830
版权

        经常我们项目中，随着时间推移，css样式越来越多。越来越臃肿。但是又不敢轻易删除，怕伤筋动骨。总不能一个一个类名去找吧。幸好发现了这个神奇。解决了不少问题。

支持的功能：

黏贴需要的HTML代码块

输入原始css

即刻得到一段精简后的css。没有引用或无效的会全部删除。css成功瘦身。

地址：Uncss 一键清除冗余css，在线删除无效css工具 - Oct.cn

如图：

沉默也会痛
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
清理CSS样式的几个有用工具
12-09
在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。 Dust-Me selectors Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件，包括使用<link>标签、<?xml-stylesheet?>处理指令、@import语句等
nuxt-purgecss：删除多余CSS！ Nuxt.js的简洁PurgeCSS包装器
02-06
Nuxt PurgeCSS-删除多余CSS！ 产品特点 轻松删除不需要CSS Webpack或PostCSS模式 已经带有强大的默认设置 建立在 Nuxt 2（仅Nuxt 2）支持 经过全面测试！ 建立 将nuxt-purgecss依赖项添加到您的项目中 yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss 添加nuxt-purgecss到buildModules的部分nuxt.config.js export default { buildModules : [ // Simple
前端开源库-uncss
08-30
前端开源库-uncssuncss，删除未使用的css样式
uncss：从CSS删除未使用的样式
02-02
联合国CSS UnCSS是一种可从样式表中删除未使用CSS的工具。 它可以跨多个文件工作，并支持注入JavascriptCSS。 怎么样 UnCSS删除未使用的规则的过程如下： HTML文件由加载并执行JavaScript。 所有样式表均由解析。 document.querySelector过滤掉HTML文件中找不到的选择器。 其余规则将转换回CSS。 请注意： UnCSS不能在非HTML页面（例如模板或PHP文件）上运行。 如果您需要对模板运行UnCSS，则可能应该从模板生成示例HTML页面，并对这些生成的文件运行uncss。 或运行实时的本地开发服务器，然后指向uncss。 UnCSS仅运行页面加载时运行的Javascript。 它不能（也不能）处理在用户交互（例如按钮单击）上运行的Javascript。 您必须使用ignore选项来保留Javascript在用户交互时添加的类。 安装 npm install -g uncss 用法 在线服务器 非官方服务器，非常方便测试或一次性使用！ 在Node.js中 var uncss = require ( 'uncss'
UnCSS是一个工具从样式表中删除未使用的CSS
08-08
UnCSS是一个工具，从样式表中删除未使用的CSS。 它适用于多个文件，并支持Javascript注入的CSS。
自动清除html无用css,使用uncss去除无用的CSS
weixin_32817047的博客
05-31 488
从代码的角度讲，你知道什么是比往网站或应用里添加功能更好的事情吗？删除那些没用的东西。也许是一些代码、图片、或相关依赖等，就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积，这既能提供页面加载速度，又能减少带宽流量。然而，你知道有什么工具能找到页面中样式文件里无用的CSS吗？之前我介绍过一个用JavaScript找到无用CSS的方法，但事实上，我们并不想知道...
使用uncss去除无用的CSS
zhangwenwu2的博客
11-10 4581
1、安装nodejs，gulp，gulp_uncss 1.1、说明：gulp-uncss 是gulp的一个插件。gulp是基于nodejs，理所当然需要安装nodejs； 1.2、安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后像安装QQ一样安装它就可以了（安装路径随意）。 1.3、安装gulp：全局安装gulp，
gulp插件uncss的使用
weixin_30532759的博客
06-20 245
1】全局安装gulp（在nodejs环境下安装） npm install gulp -g 2】进入目标文件夹 3】初始化项目 　　npm init 4】首先要确保项目中安装gulp 　　npm install gulp --save-dev 5】安装gulp-uncss 　　npm install gulp-uncss --save-dev 6】创建gulpfile.j...
清理无用的CSS样式比较有用的几个工具
12-12
这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。 Dust-Me selectors Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件，包括使用link标签、< ?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件；可以检查一个页面，也可以检查整个网站；支持CSS1选择器、大部分CSS
Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)
03-28
第一步，我们需要安装Firefox30,不能高于30; http://ftp.mozilla.org/pub/firefox/releases/30.0b9/win32/zh-CN/Firefox Setup 30.0b9.exe 安装浏览器后关闭自动升级： 打开Firefox浏览器--打开菜单(右上角三条横杆)--选项--更新--不检查更新 另外可以将反馈选项中的都取消 第二步，安装前端开发人员最普及的开发工具 Firebug-2.0.16 (下载包中有) 安装方法: 打开Firefox浏览器--打开菜单(右上角三条横杆)--附加组件--扩展--点击右上角有个雪花一样的设置按钮--从文件安装附加组件--选择firebug-2.0.16-fx.xpi安装就可以 第三步，安装CSS Usage 0.2.9（下载包中有） 第四步，在Firefox浏览器中打开我们要优化的页面（本地的页面也可以），点击右上角的firebug(有个小蜜蜂图标)，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况. Clear: 清除扫描结果,当我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始其他的扫描. AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率. 简单来说： Scan: 扫描当前页面的CSS使用情况。 Clear:清除扫描结果。 AutoScan:自动扫描每个打开的页面。 我们可以使用AutoScan的叠加结果 然后CSS文件名称后面有个export cleaned css 点击后可导出扫描的结果，结果就是干净的CSS文件。 我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的,=保留 深绿色–的以前的扫描中看到的,=保留 红色–的表示在当前和以前扫描中均未发现的.=这部分可以清除 灰色–的代表伪类的选择器CSS,这部分将会被忽视. 如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了 注意，说了这么久，大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具，可以清理多余的CSS样式， 但是，你一定要扫描足够多的网页，尽可能地找到最多的样式。 同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计,就是CCS文件后面的(1 scans) 如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我，每一次页面跳转，CSS Usage 都会自动增加页面的扫描次数
gulp--gulp-uncss清理多余无用css
m0_37978717的博客
06-23 1543
cnpm 也可以使用npm cnpm install gulp-uncss --save-dev   gulpfile.js var gulp = require('gulp'), uncss = require('gulp-uncss'); gulp.task('uncss', function() { gulp.src('src/css/origin.cs
根据html除去多余css样式在线,@程序员，以后删除多余CSS样式就靠它了！
weixin_35815640的博客
05-31 389
开源最前线(ID：OpenSourceTop) 猿妹整编综合自：https://github.com/uncss/uncss假如你是一个前端程序员，在建网页的时候可能会碰到这样一种情况：CSS的样式越来越多，但是到了后面很多类你压根用不着，这用一句俗语来形容就有点占着茅坑不拉屎的感觉了，想要把它们删了，太麻烦，不把它们删了，占空间。今天，猿妹要和大家推荐一个项目——UnCSS，这个工具可以从样式表...
仿站利器！一键去除冗余css
qq_34304065的博客
07-17 593
项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的 CSS代码。或者扒站的时候，有时候只是想扒一点小地方，如果一点一点的扒对应的CSS也是不小的工作量。 这时候UnCSS这个神器就派上用场了。 打开网址：https://uncss.7ru.com/ ...
检查网站中没用到的css
andyliu的专栏
04-02 3229
使用firefox 组件来检测网站中没有使用的css 在火狐的附件管理器中搜索Dust-Me selectors并添加 重启浏览器  点击这个右上角这个图标就可以运行了， 这时界面看起来很方便。
CSS技巧：清理无用的CSS样式
热门推荐
Jensen Wu UED
03-13 1万+
我们在编写CSS样式的时候，往往或遭遇CSS样式的修改或者界面设计的变更，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。 　　一、Dust-Me sel
vscode 查找css_uncss：查找未使用CSS
Web 开发&软件开发
08-05 1653
uncss：查找未使用CSS 从代码的角度来看，您知道比向网站或应用程序添加功能更好的方法吗？ 删除不需要的东西。 无论是代码，图像还是依赖项，都摆脱了 废话 经过一整天的紧张工作后，陈旧的代码就像喝了一大杯酒后的第一口。 通过ImageOptim运行图像目录是一种愉悦的体验，对吗？ 但是，如果有一个工具可以让您找到给定网站的未使用CSS，该怎么办？ 有一个叫做uncss支持的实用程序...
nuxt3使用记录六：禁用莫名其妙的Tailwind CSS(html文件大大减小)
最新发布
lsjweiyi的博客
04-29 398
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
win7-win10系统一键垃圾清理(超级版).bat
07-02
### 回答1： win7-win10系统一键垃圾清理(超级版).bat是一个批处理文件，可以帮助用户快速清理系统中的垃圾文件。通过执行此文件，可以有效地清理系统垃圾，释放磁盘空间，提高系统性能。 该批处理文件的具体功能包括以下几个方面： 1. 清理临时文件夹：这个脚本可以帮助用户删除系统临时文件夹中的所有垃圾文件，包括临时数据、网络缓存等。 2. 清理回收站：执行此文件后，用户可以彻底清空回收站中的所有文件和文件夹，释放额外的磁盘空间。 3. 清理浏览器缓存：该批处理文件可以清理浏览器（如Chrome、Firefox等）的缓存文件，包括临时文件、Cookie、浏览历史等。 4. 关闭不必要的后台进程：该脚本可以帮助用户关闭一些不必要的后台进程，以释放系统资源，提高系统响应速度。 5. 优化系统注册表：执行此文件后，可以扫描和修复系统注册表中的错误，以提高系统的稳定性和性能。 6. 清理无效快捷方式：该脚本可以帮助用户查找和删除系统中的无效快捷方式，以减少文件的混乱和计算机的加载时间。 需要注意的是，运行此批处理文件前，请提前备份重要数据，并确保只下载来自可信来源的文件。此外，由于每个用户的系统配置及需求不同，执行此脚本后可能会导致一些自定义设置被重置，请谨慎使用。 总之，win7-win10系统一键垃圾清理(超级版).bat是一个方便、快捷的工具，可以帮助用户自动清理系统中的垃圾文件，提高系统的整体性能和效率。 ### 回答2： Win7到Win10的系统升级带来了许多新特性和改进，但也会累积大量的垃圾文件和无用的注册表项，影响系统运行速度和稳定性。为了解决这个问题，我们可以创建一个超级版的一键垃圾清理批处理文件（.bat），用于自动清理系统中的垃圾文件。下面是一种可能的实现方式： 首先，我们需要使用批处理文件语法编写脚本代码。打开文本编辑软件，创建一个新的文本文件，并将其保存为".bat"扩展名的文件，比如"clean.bat"。接下来，我们将在文件中编写一些命令来执行具体的垃圾清理操作。 然后，在批处理文件中，可以使用一些命令来清理不同类型的垃圾文件。比如，可以使用"del /f /s /q %TEMP%\*.*"命令来清除临时文件，该命令会删除指定目录下的所有文件和子文件夹；可以使用"del /f /s /q C:\Windows\Temp\*.*"命令来清除Windows系统临时文件夹中的文件；可以使用"cleanmgr /sagerun:1"命令来运行系统自带的磁盘清理工具等。 最后，保存和关闭批处理文件。之后，双击该批处理文件即可自动运行垃圾清理过程。用户也可以将该批处理文件添加到计划任务中，以方便定期运行清理操作。 需要注意的是，使用批处理文件清理垃圾文件时要小心，确保不删除系统关键文件和用户重要数据。如果不确定某个文件是否可以删除，请首先备份该文件，以防发生意外情况。 总结来说，通过编写一个批处理文件用于清理Win7到Win10系统中的垃圾文件，可以提高系统的运行效率和稳定性。在实际使用过程中，建议谨慎操作，确保不会误删重要文件。 ### 回答3： Win7 - Win10 系统一键垃圾清理（超级版）.bat 文件是一个批处理文件，用于帮助用户自动清理系统中的垃圾文件。 首先，该文件会定位到系统中的临时文件夹，这是系统存储临时文件的地方。它会删除这些临时文件，因为这些文件是系统运行时生成的而不必要的。 然后，这个 .bat 文件会扫描内存中的缓存文件并清理它们。缓存文件用于加速系统对一些常用程序的访问，但随着时间的推移，这些文件可以积累得很多并占据大量的硬盘空间。 接下来，它会扫描系统注册表并清理其中无用的和过时的条目。注册表存储了系统中的大量配置信息，但有时会存在无效的或过时的条目，清理它们可以帮助系统更快地运行。 此外，这个批处理文件还会检查系统中的垃圾文件夹，如回收站、临时互联网文件夹和下载文件夹，并删除其中的无用文件。这些文件夹可能包含用户删除的文件、网络浏览记录和下载的文件，他们占据了硬盘空间，但实际上并不需要。 最后，一键垃圾清理完成后，系统将会自动重新启动以确保清理动作的生效。 需要注意的是，使用该批处理文件可能会删除一些用户可能需要的文件，请在使用前确保重要文件已备份。同时，批处理文件本身也可能有潜在的风险，请从可信的来源获取该文件并谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值