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

UX-一涵提问于 2026-03-12 20:20:24 阅读 2

工具

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

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

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

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

优化流程

我来解答赞 1 收藏

反馈

1 条解答

艺菲酱~ 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