简介
@dmartss/polisher 是一个基于 postcss 的 CSS 处理工具，它可以自动优化 CSS 代码，去除冗余的样式，减小 CSS 文件的大小，提升页面加载速度。它使用了一些高效的算法来进行样式分析和优化，保证了在不影响样式表达的前提下，尽可能减少 CSS 文件大小。
安装
你可以使用 npm 安装 @dmartss/polisher：
--- ------- -----------------
如何使用
配置 postcss
@dmartss/polisher 是一个 postcss 插件，因此你需要先配置 postcss。如果你已经使用了 postcss，只需要在配置文件中引入 @dmartss/polisher 即可。
如果你还没有使用 postcss，可以参考以下步骤：
安装 postcss 和 postcss-cli：
--- ------- ------- ----------- ----------
在项目根目录创建 postcss.config.js 文件，并配置 @dmartss/polisher 插件：
-------------- - - -------- - ---------------------------- - -
命令行使用
@dmartss/polisher 提供了命令行工具，可以方便地对 CSS 文件进行处理。运行以下命令即可将 input.css 文件压缩为 output.css：
------- --------- -- ----------
作为 postcss 插件使用
你也可以将 @dmartss/polisher 作为 postcss 插件使用。以下是一个 gulpfile.js 的示例，使用 gulp 来处理 CSS 文件：
----- ---- - ----------------
----- ------- - ------------------------
----- -------- - -----------------------------
---------------- -------- -- -
------ ---------------------
---------------
----------
---
-------------------------
---以上 gulpfile.js 会将 src 目录下的所有 CSS 文件压缩后输出到 dist 目录中。
配置选项
你可以在配置文件中为 @dmartss/polisher 提供以下选项：
whitelist
类型：Array
默认值：[]
如果你的样式表中有部分规则你不想被优化，可以使用 whitelist 属性来保护它们。例如，如果你的样式表中有以下代码：
-- - ---------- ----- -
如果你不希望 @dmartss/polisher 将其转换为：
----
你可以将其添加到 whitelist 中：
---------- ---------- ------ --
propertiesToRemove
类型：Array
默认值：[]
@dmartss/polisher 会去除掉一些常见的冗余属性，例如 padding: 0;，background: none; 等等。如果你有自定义属性不想被去除，可以使用 propertiesToRemove 属性将其保留。
例如，以下代码中的 user-select 属性不会被去除：
---------- ------------------- -------------- -------------- --
removeDuplicateRules
类型：Boolean
默认值：true
当不同选择器中包含了相同的规则时，@dmartss/polisher 会将它们合并为一个规则。你可以通过设置 removeDuplicateRules 来控制此操作的开启或关闭。
例如，以下代码中会将 .foo h1 和 .bar h1 中的相同规则合并：
---- -- - ---------- ----- - ---- -- - ---------- ----- -
removeUnusedAtRules
类型：Boolean
默认值：true
有些样式表中包含了许多没有被使用的 @font-face，@keyframes 等等，这些都会增加样式表的体积。@dmartss/polisher 会自动去除这些未使用的 at-rule。
你可以设置 removeUnusedAtRules 来控制此操作的开启或关闭。
例如，以下代码中不会删除未被使用的 @font-face：
---------- -------------------- ----- --
总结
@dmartss/polisher 是一个优秀的 CSS 处理工具，它使用高效的算法帮助你自动优化 CSS 代码，减小文件大小，提升页面加载速度。通过配置选项，你可以轻松地控制它的操作，保证最终样式表的正确性和有效性。如果你正在开发前端项目，@dmartss/polisher 一定是一个不错的选择！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f92238a385564ab6fff