saber酱的抱枕

生于忧患,死于安乐

02/14
02:56
软件

使用 UnCSS 移除冗余的 CSS 规则

CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。

UnCSS GitHub 页面

首先安装 UnCSS:

npm install -g uncss

之后指定要分析的页面的 url,并设置输出的文件名:

uncss http://127.0.0.1:5500/index.html > styles.css

如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。

上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。

使用 UnCSS 移除冗余的 CSS 规则