使用 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 代码。