什么是 purifycss-webpack
purifycss-webpack 是一个 webpack 插件，它可以帮助我们清除网站或应用中没有使用的 CSS 样式。这个插件基于 purify-css 包，可以通过扫描 HTML 和 JavaScript 文件来检测哪些 CSS 样式被实际使用了。
安装和配置
首先，需要在项目中安装 purifycss-webpack：
npm install --save-dev purifycss-webpack
在 webpack 配置文件中引入 purifycss-webpack：
const PurifyCSSPlugin = require('purifycss-webpack');然后，在 plugins 数组中添加一个新的实例：
plugins: [ new PurifyCSSPlugin({ // options }) ]最后，在插件的 options 中指定需要扫描的文件路径：
new PurifyCSSPlugin({ paths: glob.sync([ // 要扫描的文件路径 ]) })
示例代码
假设我们有一个 CSS 文件 styles.css：
-- -------------------- ---- ------- ---- - ----------------- ----- - -- - ---------- ----- ------ ----- - - - ---------- ----- ------ ----- -
以及一个 HTML 文件 index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------- ----- ---------------- ------------------ ------- ------ ----------- -- -- -------- ------- -- - -------------- ------- -------
我们可以在 webpack 的配置文件中使用 purifycss-webpack 来检测哪些样式没有被用到：
-- -------------------- ---- -------
----- --------------- - -----------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
--- -----------------
------ -----------
-------------------- ----------
-------------------- -------
--
--
--
-- ---
--这个例子中，我们将所有的 HTML 和 JavaScript 文件都加入了扫描路径中。然后，在编译 webpack 时，会自动检测出哪些 CSS 样式没有被使用到，并从 styles.css 文件中移除它们。
总结
使用 purifycss-webpack 可以帮助我们更好地优化应用程序的性能，去掉无用的 CSS 样式，减小文件大小，提高加载速度。只需要简单地安装和配置这个插件，就可以轻松实现这个目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52144