介绍
在前端开发中，为了优化网站的性能和体验，我们通常需要对 CSS 代码进行压缩和精简。其中，通过删除未使用的样式来减小 CSS 代码文件大小是一种有效的优化方案。这就是 PurgeCSS 工具的作用。
PurgeCSS 可以分析 HTML 和 JavaScript 文件，找出未使用的 CSS 样式，然后将其移除。使用 PurgeCSS 可以显著减小 CSS 文件大小，提高页面加载速度。
@fullhuman/postcss-purgecss 是一个基于 PostCSS 的 PurgeCSS 插件。本文将说明如何使用该插件来提高项目的性能和体验。
安装
在安装 @fullhuman/postcss-purgecss 插件前，需要先安装一系列相关的依赖：
npm install postcss @fullhuman/postcss-purgecss autoprefixer cssnano
其中，postcss 是一个 CSS 处理工具，autoprefixer 可以自动添加 CSS 浏览器前缀，cssnano 可以进行 CSS 压缩，这些工具都是与 @fullhuman/postcss-purgecss 插件一起使用的。
配置
在项目中的 postcss.config.js 文件中进行配置，示例如下：
-- -------------------- ---- -------
----- -------- - --------------------------------------
-------------- - -
-------- -
--------------------------
------------------------
----------
-------- ------------------- ----------------- ------------------
---- -------------------
--------- ---------- ------------
---
------------------
-
-其中，purgecss 插件的配置选项包括：
content: 需要分析的 HTML、Vue 后缀的文件和 JSX 文件的路径，支持多个路径。css: 需要分析的 CSS 文件的路径，支持多个路径。safelist: 安全列表，定义哪些 CSS 类名不会被删除。可以是一个正则表达式或字符串的数组。
使用
在项目中使用该插件非常简单。只需要在代码编辑器的终端中输入以下命令即可：
npx postcss ./src/index.css -o ./dist/index.css
其中，./src/index.css 是你要处理的 CSS 文件路径，./dist/index.css 是处理后的文件存储路径。你也可以将该命令写入到 package.json 文件的 scripts 中，方便调用。
{
"scripts": {
"build": "npx postcss ./src/index.css -o ./dist/index.css"
}
}接着运行 npm run build 命令即可完成 CSS 文件的优化。
示例代码
在 Vue 中使用 @fulhuman/postcss-purgecss 插件优化 CSS 文件：
在 postcss.config.js 文件中添加如下配置：
-- -------------------- ---- -------
----- -------- - --------------------------------------
-------------- - -
-------- -
--------------------------
------------------------
----------
-------- ------------------- ----------------- ------------------
---- -------------------
--------- ---------- ------------
---
------------------
-
-在 package.json 文件中的 scripts 里添加如下命令：
{
"scripts": {
"build": "npx postcss ./src/style.css -o ./dist/style.css"
}
}运行 npm run build 命令即可完成 CSS 文件的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd618bb4e78292a6fb8b1