元素
元素
工具
博客
问答

Lighthouse 建议移除未使用的 CSS，但我不知道哪些能删？

UX-一涵 阅读 43
工具

我用 Lighthouse 跑分时总提示“移除未使用的 CSS”，可项目里样式是通过 @import 拆分的，手动删怕出问题。有没有办法自动识别哪些 CSS 真的没用到？

试过 PurgeCSS，但配置完页面样式直接乱了，怀疑它把动态添加的 class 也删了。比如下面这种写法：

document.body.classList.add('theme-dark');

这种运行时动态切换的类名，工具能识别吗？还是得靠人工判断？

优化流程
我来解答 赞 11 收藏
二维码
手机扫码查看
反馈
2 条解答
司空溢洋
司空溢洋 Lv1
遇到这个问题挺头疼的，不过有办法解决。PurgeCSS 配置不当确实可能导致动态添加的类被误删。你可以通过配置 safelist 来防止这种情况。具体来说，你可以把动态添加的类名列入 safelist，这样 PurgeCSS 就不会删掉这些类了。

配置示例如下：
const purgecss = new PurgeCSS({

  content: ['./src/**/*.html', './src/**/*.js'],

  css: ['./src/**/*.css'],

  safelist: {

    standard: [/^theme-/]

  }

})


这里的关键是 safelist，我用正则 /^theme-/ 来匹配所有以 theme- 开头的类名。如果你的动态类名有其他规则，可以调整正则表达式。

另外，为了确保准确性和完整性，建议在生产环境中缓存起来，避免每次构建都重新处理 CSS。这样可以节省时间，也能减少出错的可能性。

希望这能帮到你，如果有更多问题再聊。
点赞
2026-03-23 13:07
艺菲酱~
艺菲酱~ Lv1
PurgeCSS 把你动态加的 class 删掉是正常的，它只分析源码里的静态字符串。你写的 document.body.classList.add('theme-dark') 这种，PurgeCSS 扫不到 theme-dark 这个字符串出现的 HTML 标签上，所以直接给你干掉了。

解决方法很简单，在 PurgeCSS 配置里加个 safelist：

// purgecss.config.jsmodule.exports = {

  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],

  css: ['./src/**/*.css'],

  safelist: {

    standard: [/^theme-/, /^is-/, /^has-/],  // 正则匹配所有以这些开头的class

    deep: [

      // 或者精确指定某些动态class

      'theme-dark',

      'theme-light',

      'is-active',

      'is-loading'

    ]

  }

}


复制这个配置，根据你的实际情况改一下正则规则。常用的做法是把项目里所有动态切换 class 的前缀都列出来，比如 theme-、is-、has- 这类命名规范的。

如果你用的是 PostCSS 或者 webpack 的 purgecss-webpack-plugin，配置也都类似，在插件选项里加上 safelist。

还有一个思路是把动态 class 统一放在一个文件里，然后手动维护白名单列表，别让工具去猜。动态样式本来就不是工具能推断出来的，只能靠人肉保平安。
点赞
2026-03-12 21:03
相关推荐
元素
元素
工具
博客
问答
登录/注册