让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > 如何使用uncss去除无用的CSS?又能降低带宽数据流量
  • 101
  • 微信分享

    扫一扫,在手机上查看

如何使用uncss去除无用的CSS?又能降低带宽数据流量

2019.09.20 09:47 238 浏览 举报

  从源代码的方向讲,要知道什么叫比往网站或运用里增加用途更佳的情况吗?删了这种没有用的内容。或许是一部分源代码、图片、或相应依赖等,如同丢掉家里贮存柜里没有用的导致异味的存货。我时常用ImageOptim来调优我的图片的大小,这能够保证网页页面加载速率,又能降低带宽数据流量。殊不知,要知道有哪些专用工具能寻找网页页面中式样文档里没有用的CSS吗?以前我讲述过一个用JavaScript寻找没有用CSS的方式 ,但实际上,大家并不肯清楚什么CSS标准是没有用的,大家要想的是一个找不到多出CSS的整洁的式样文档。因此,这个称为uncss的NodeJS专用工具便是大家要找的了。接下来大家瞧瞧uncss是怎么用的!

  一个基础的使用说明是立即在命令行窗口里输入uncss命令:

  uncss http://www.webhek.com > styles.css

  运作输出的结论便是一个你要想的、清理了全部没有用的CSS标准的完整的样式表文档。那uncss说到底是怎样做出这种的呢?要我来一步步对你说:

  首先PhantomJS会加载整个HTML页面,然后执行JavaScript。
  接着从HTML页面里提取页面中所有的CSS样式。
  然后用css-parse分析并连接所有的样式规则。
  用document.querySelector过滤出哪些CSS选择器是没有用到的。
  最后用剩下的CSS规则生成输出文件

  跟其余NodeJS专用工具一样,它里头保证了许多JavaScriptAPI,接下来是一个运用它的API的事例:

var uncss = require('uncss');
var files = ['my', 'array', 'of', 'HTML', 'files'],
	options = {
		ignore: ['#added_at_runtime', /test\-[0-9]+/],
		media: ['(min-width: 700px) handheld and (orientation: landscape)'],
		csspath: '../public/css/',
		raw: 'h1 { color: green }',
		stylesheets: ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
		ignoreSheets: [/fonts.googleapis/],
		urls: ['http://localhost:3000/mypage', '...'], // Deprecated
		timeout: 1000,
		htmlroot: 'public'
	};
uncss(files, options, function(error, output) {
	console.log(output);
});
/* Look Ma, no options! */
uncss(files, function(error, output) {
	console.log(output);
});
/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function(error, output) {
	console.log(output);
});

  一个运行维护多年的网站或Web应用终究会导致许多没有用的源代码,那是深以为然的。多出的源代码不但给WEB程序员产生检修的分担,也给使用者导致消极影响。请试一下uncss,确实十分简单,彻底自动的帮你清理没有用的CSS源代码!


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐