使用Chrome Audits功能清理无用的css
来源:互联网 发布:知乎 梁湖清 编辑:程序博客网 时间:2024/06/07 14:51
Google chrome在“开发者工具”中提供了类似 dust-me 的冗余css检测功能。 chrome用户可以在Audits面板内使用这个功能: 选择 Web Page Performance 选框并点击Run,会得到类似如下格式的提示
Remove unused CSS rules (185)35.39KB (51%) of CSS is not used by the current page.> my.release.css: 35.39KB (51%) is not used by the current page.这里显示了当前页面加载但没有用到的css样式文件和样式名称列表,点击css文件名前的 箭头可以展开得到一个列表。如果冗余内容很少,就可以直接分析一下然后到文件内删掉了。 需要注意的是,这个功能只是分析当前页面,所以很多其他页面需要但当前页没有使用的样式 也会列出。所以需要谨慎操作,完全确定了是冗余的样式,再手工清除。
我主要用这个功能去除一些想要借鉴的页面中冗余的css,都是从网站上直接保存来的单独页面。 所以我自制了批量清理工具。
我进行批量清理的步骤(由于Audits会将很多全局css认作unused,故批量清理比较危险,仅作学习使用):
- 将冗余的css列表保存成keys.txt
- 一般下载来的css都是压缩后的,不方便查看,这里我先将加密的css文件格式化:Replace regexp (default } -> }^J): RET
- 打开 keys.txt 和 需要精简的css文件,在 * scratch * 内使用
C-x C-e 执行以下代码: 由于chrome分析出的结果可能重复,这段小程序使用了cl的去重方法。
)
0 0
- 使用Chrome Audits功能清理无用的css
- CSS技巧:清理无用的CSS样式
- 清理无用的CSS比较有用的几个工具
- 清理无用的CSS样式比较有用的几个工具
- 使用uncss去除无用的CSS
- gulp--gulp-uncss清理多余无用css
- shell应用:清理无用的deb包
- 使用Helium找出页面上无用的CSS样式
- 使用Helium找出页面上无用的CSS样式
- 移除无用的CSS
- Windows Power Shell 关闭无用的Chrome
- Php Code Audits的方向
- Google Audits的中英文对照
- git 清理无用文件
- [Unity3D]清理material中无用的的property
- 清理ueditor中上传的无用的图片
- Java清理mysql中无用的数据库查询
- Ubuntu技巧之清理系统中无用的软件包
- Android实战简易教程<十六>(LineChart实现数据趋势展示)
- android HAL 理解
- 迷茫
- (总结)Nginx配置文件nginx.conf中文详解
- PRML 阅读笔记之神经网络(一)
- 使用Chrome Audits功能清理无用的css
- Android Studio利用Gradle删除没有使用到的资源文件
- wget用法
- hdu5445 || 2015长春网络赛1009题 多重背包问题
- 第一次接触cygwin
- Binary Tree Postorder Traversal 非递归实现二叉树后序遍历
- C++抽象类
- Linux下的主要的C语言编译器
- JPG格式照片转PDF格式电子书