在前端开发中，优化网站的性能是非常重要的一个环节，其中一个较为常见的方式是去除多余的 CSS 样式，减少 CSS 文件的大小，从而提高页面加载速度。
metalsmith-uncss 是一个基于 Markdown 编写的 Node.js 静态网站生成器的无用 CSS 移除插件。它的主要功能是将生成的 HTML 文件和相关 CSS 文件进行对比，去除未使用的 CSS 样式。
安装
安装 metalsmith-uncss 插件，我们需要先安装 Node.js 和 metalsmith。然后使用 npm 安装 metalsmith-uncss：
npm install --save metalsmith-uncss
使用
- 引入插件
在 metalsmith 工程中，我们需要通过 use 方法引入 metalsmith-uncss 插件，并传入其配置对象，如下所示：
-- -------------------- ---- ------- --- ---------- - ---------------------- --- ----- - ---------------------------- --------------------- ------------ ---- ------------------------- ---------------- ------- -------- --------------------- ----- ------------- --- ---------展开代码
- 配置选项
css（必需）：需要检查的 CSS 格式文件路径html（必需）：需要检查的 HTML 文件路径ignore：需要忽略的 CSS 选择器timeout：默认为 1000，等待页面加载的最长时间htmlroot：HTML 文件的根目录，默认为nullreport：是否打印没有用到的 CSS 选择器，默认为false
示例
-- -------------------- ---- ------- --- ---------- - ---------------------- --- -------- - ------------------------------- --- ----- - ---------------------------- --- ----- - ---------------------------- --- ----- - ---------------------------- --------------------- ---------------- ----------------------- ---------------- ------------ ---- ------------------------- ---------------- ------- -------- --------------------- ----- ------------- --- ------------ ----- ----- -------- ----- ----------------- - ---- ----------- - --- ------------ ------ - ----------------- ----- --------------- ---------- - --- -------------------- - -- ----- ----- ---- ---展开代码
以上代码中，我们先使用 metalsmith-markdown 将 Markdown 文件转化为 HTML 文件，然后再引入 metalsmith-uncss 插件去除未使用的 CSS 样式。最后，使用 metalsmith-serve 和 metalsmith-watch 启动本地服务。
结论
metalsmith-uncss 插件可以有效地减少 CSS 文件的体积，并提高页面的加载速度，特别是在网站中使用了一些较大的 CSS 框架或者库时，效果更为明显。因此，在前端开发中，应将其作为一个优化网站性能的重要手段之一，从而提高用户的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e1e
