Tree Shaking 为什么没把没用的 CSS 类删掉？

奥翔 Dev 提问于 2026-03-25 21:03:18 阅读 28

优化

我用 Vite + React 做项目，发现打包后的 CSS 还是包含了很多没用的类。明明只用了 .btn-primary，但 .btn-secondary、.btn-danger 这些也被打包进去了。是不是 Tree Shaking 对 CSS 不生效？

我的 CSS 是这样写的：

.btn-primary {
  background: blue;
}
.btn-secondary {
  background: gray;
}
.btn-danger {
  background: red;
}

JS 里只 import 了这个文件，并且只用了 .btn-primary，其他类根本没引用，为啥删不掉？

效果分析

我来解答赞 2 收藏

反馈

1 条解答

令狐常青 Lv1

Tree Shaking 主要是针对 JavaScript 的依赖分析和优化，对 CSS 这种静态资源确实不太管用。CSS 文件在打包时不会像 JS 那样进行引用分析，所以即便你只用了 .btn-primary，其他类还是会原封不动地打包进去。

要解决这个问题，可以考虑使用 PurgeCSS 或者 Vite 自带的 cssMinify 选项来清理未使用的样式。PurgeCSS 能够扫描你的源码，找到实际使用的类名并移除没用到的部分。

首先安装 PurgeCSS 相关插件

npm install vite-plugin-purgecss --save-dev

然后在 Vite 配置文件中加上这个插件：

import { defineConfig } from 'vite'

import purgecss from 'vite-plugin-purgecss'



export default defineConfig({

  plugins: [

    purgecss({

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

    })

  ]

})

调试看看打包后的结果，应该能清理掉那些没用到的样式了。开发中遇到这种问题挺常见的，别太纠结，找对工具就好办了。

2026-03-25 22:05