什么是gatsby-plugin-purify-css
gatsby-plugin-purify-css是一个用于GatsbyJS框架的npm包，旨在帮助网站加速加载和减少网站的下载量。
GatsbyJS是一个基于React的开源静态网站生成器，可以将您的静态内容（如markdown文件）转换成优化的前端资源。 这意味着您可以将其部署到几乎任何静态网站服务中，并且您的网站将很快加载并具有很高的SEO性能。 但是，随着您的网站增长，您可能会注意到其加载速度有所下降，这时可以考虑使用gatsby-plugin-purify-css进行优化。
gatsby-plugin-purify-css通过分析您的React代码，找出网站中未使用的CSS代码并将其删除，从而最大程度地减少CSS文件的大小。
如何安装gatsby-plugin-purify-css
在您的Gatsby网站根目录中，运行以下命令安装gatsby-plugin-purify-css：
npm install gatsby-plugin-purify-css --save-dev
然后，在gatsby-config.js文件中启用该插件，如下所示：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ---------------------------
-------- -
-- ---------------
-- ----
-
-
-
-现在，我们已经安装并启用了gatsby-plugin-purify-css，接下来是如何配置它以及如何减少网站的下载量。
如何配置gatsby-plugin-purify-css
gatsby-plugin-purify-css依赖于PurifyCSS和Glob-all，可以使用这两个npm包的所有配置选项。 这里只介绍最重要的选项。
paths
这是一个必需的选项，用于指定要搜索样式表的路径（可以是Glob模式）。
options: {
paths: ['/src/**/*.{js,jsx}']
}styleId
这是为您的网站生成的样式表分配的ID。
options: {
styleId: 'gatsby-inline-css'
}modulePaths
用于指定包含样式表的路径。
options: {
modulePaths: ['node_modules', 'src']
}purifyOptions
这是将直接传递给PurifyCSS的选项。
options: {
purifyOptions: {
info: true, // 显示优化 CSS 的信息
whitelist: ['.whitelist'], // Whitelist some classes
minify: true // Enable minification
}
}rejected
这可以是一个函数或布尔值。 如果它是函数，则函数将接收每个未使用的CSS选择器，您可以在此中断或调试。如果布尔值，则将在插件退出时将所有未使用的选择器打印到控制台。
options: {
rejected: true
}示例代码
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- ---------------------------
-------- -
------ -----------------------
-------- --------------------
------------ ---------------- -------
-------------- -
----- -----
---------- ---------------
------- ----
--
--------- ----
-
-
-
-结论
gatsby-plugin-purify-css可以帮助您优化您的Gatsby网站加载速度，并减少下载了未使用的CSS文件。使用该插件可以让您的网站更具性能，用户体验更佳。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f281e8991b448e0ab3