如何删除未使用的 CSS

在开发工作流程中使用 Purgecss 将 CSS 文件减少 60% 以上。

我一直在寻找一种可以让我清除 CSS 中未使用的样式的工具。

我为什么要寻找这种工具？因为现在几乎每个开发人员都使用大量的 CSS 框架和库来更快、更轻松地开发界面，所以 CSS 文件的大小不可避免地会大幅增加。

但是，你从外部库导入的 CSS 样式有多少真正用到了呢？有时甚至不到 20%，那么为什么你需要保留这些未使用的样式呢？没有理由！

Purgecss
这里 Purgecss 可以提供帮助，它是一种有助于删除未使用的 CSS 的工具，可以作为开发工作流程的一部分使用。

Purgecss 在场景下是如何工作的？它需要知道：
1 - 需要清理的 CSS 文件。2
- 需要检查的文件
。3 - 生成的新文件的目标路径。

因此，它将从初始 css 文件[1] 开始，在您的 html 文件（例如）[2] 中搜索，然后从那里创建一个仅包含您实际使用的样式的新 css 文件[3]。

我确信，如果您尝试一下，您将能够将CSS 的大小减少60% 以上。

构建工具
Purgecss 的妙处在于，您可以使用许多流行的构建工具在开发工作流程中实现它：
• CLI
• JavaScript API
• Webpack
• Gulp
• Rollup

JS 框架
我们也可以将它与最现代的 JavaScript 框架一起使用，例如：
• React
• Vue
• Next
• Nuxt

如何使用 Purgecss
我写了一整篇文章介绍如何使用 Gulp 设置 CSS 构建过程，其中我也使用了 Purgecss，所以如果您对这个构建过程感兴趣，我建议您阅读这篇文章。

在 Medium 上（https://medium.com/notonlycss/how-to-remove-unused-css-ad67421794a7），我将向您展示如何使用Gulp和Nuxt.js实现 Purgecss 。