使用 UnCSS 删除多余的 CSS 代码

发布于 2019-05-31

使用 UnCSS 删除多余的 CSS 代码

UnCSS是一种从样式表中删除未使用的CSS代码的工具。它适用于多个文件,并支持Javascript注入的CSS。UnCSS 是基于 nodejs 的一个插件,所以使用的时候需要先安装nodejs。

减小CSS文件体积的好处

  1. 节约网络传输量和带宽占用
  2. 节约服务器空间占用
  3. 节约服务器的处理压力
  4. 加快网站页面的渲染显示速度

UnCSS是如何工作的?

UnCSS删除未使用规则的过程如下:

  1. 首先 jsdom 会加载整个HTML页面,并执行 JavaScript。
  2. 所有样式表都由PostCSS解析。
  3. document.querySelector 过滤掉HTML文件中找不到的选择器。
  4. 其余规则将转换回CSS。

注意事项:

  1. UnCSS 无法在非 HTML 页面上运行,例如模板或PHP文件。如果需要针对模板运行 UnCSS,则应该从模板生成示例HTML页面,并对这些生成的文件运行 uncss,或运行一个实时的本地开发服务器,然后指向那个。
  2. UnCSS 仅运行在页面加载时运行的Javascript。它不会(也不能)处理在按钮点击等用户交互上运行的 Javascript。必须使用该 ignore 选项来保留Javascript在用户交互时添加的类。

安装

sudo npm install -g uncss

用法

从命令行运行:

基本用法: uncss [options] <file or URL, …>

例如:

sudo uncss https://www.pieruo.com > styles.css

执行上述命令后会在本地生成一个 css 文件,这个就是过滤之后的 css 代码。

喜欢 1
奋楫笃行,臻于至善!

相关文章

基于 canvas 一款非常酷炫的动态气泡背景实现方法

canvas 是 HTML5 新增的标签,利用它我们可以轻松实现图形的绘制。canvas 元素本身并没有绘制能力,它只是一个图形的容器,必须使用脚本(通常是 JavaScript)配合来完成绘图任务。...
阅读全文

基于 sketch.js 实现非常酷炫的鼠标点击特效

JavaScript 是浏览器端脚本语言,有许多非常实用的第三方 JS 类库,我们可以借助它来实现各种各样的特效,今天为大家分享一下基于 sketch.js 实现鼠标点击特效的方法。 实现方法 实现的...
阅读全文

网站夜间模式的实现思路与详细教程分享

网站夜间模式是怎样实现的? 整体思路 夜间模式开关按钮:用来手动切换夜间模式的,会存储cookie。 自动夜间模式:当cookie为空时,浏览器时间大于22点小于6点时会自动进入夜间模式,并存储coo...
阅读全文

pace.js 网页自动加载进度条 JavaScript 插件

我们在浏览网页的时候,经常会看到网站顶部有一个好看的加载进度条,我们可能会好奇它是怎样实现的。页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天...
阅读全文

Vue.js 开发环境搭建及实例运行简明教程

Vue和jQuery一样,是一个前端框架,如果你要问在过去的一年里,前端技术框架什么最火,那无疑就是前端三巨头:React、Angular和Vue。今天,我们就一起来简单了解一下什么是Vue,以及它的...
阅读全文

nofollow、noopener 和 noreferrer 的区别与联系

大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎,不要将该链接计入权重。因此多数情况下,我们可以将一些不想传递权重的链接进行nofllow处理,例如一些非本站的链接,不想传递权重,但是...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注