为什么Rollup打包后Tree Shaking没去掉未使用的CSS类？

景叶的笔记提问于 2026-02-17 08:29:32 阅读 23

优化

在用Rollup打包Vue组件时遇到了奇怪的问题，明明代码里只用了CSS文件中的两个类，但打包后的样式文件里却包含了所有类。我检查过配置，已经设置了”sideEffects: false”，还试过在导出语句加注释/* @__PURE__ */，但都没用。

比如这个CSS文件：


.button {
  padding: 1rem;
  background: blue;
}
.button--primary {
  color: white;
}
.button--secondary {
  color: black;
}

组件里只导入了.button和.button–primary，但最终bundle里还是带着.button–secondary。是不是我的Tree Shaking配置哪里漏了？或者Rollup需要额外插件处理CSS引用？

Rollup优化

我来解答赞 8 收藏

反馈

1 条解答

夏侯国玲 Lv1

说实话，当时我也卡在这问题上挺久的。Tree Shaking对CSS的处理跟JavaScript完全不是一回事，你遇到的问题其实是因为Rollup本身并不直接分析CSS的内容，它只能基于JavaScript的导入导出关系来做优化。所以即使你设置了sideEffects:false或者加了PURE注释，它也没法自动帮你去掉未使用的CSS。

要解决这个问题，得借助专门处理CSS的工具。推荐你用rollup-plugin-postcss配合purgecss来实现。Purgecss会扫描你的代码，把实际用到的CSS类找出来，剩下的才会被移除。

给你一个简单的配置参考：

import postcss from 'rollup-plugin-postcss';

import purgecss from '@fullhuman/postcss-purgecss';



export default {

  plugins: [

    postcss({

      extract: true,

      plugins: [

        purgecss({

          content: ['./src/**/*.vue', './src/**/*.js'], // 扫描这些文件

          defaultExtractor: content => content.match(/[w-/:]+(?
        })

      ]

    })

  ]

};

这里有几个坑要注意：
1. content要正确指向你的源码文件路径，不然Purgecss找不到使用的地方，可能会误删实际用到的类。
2. 如果用了动态类名比如:class="'button-' + type"，Purgecss可能识别不出来，需要在配置里加safelist手动保留。
3. 记得在开发环境关掉Purgecss，不然热更新的时候样式会被删掉，调试起来很抓狂。

我当时就是按这个方法搞定的，打包后确实只留下了用到的CSS类，效果立竿见影。不过还是得提醒一句，Purgecss有时候会过于激进，上线前一定要仔细测试，别删错了关键样式。

2026-02-17 09:00