Rollup打包后文件包含未使用的CSS类名怎么办？

这个问题我之前也踩过坑，Rollup 默认确实不会像 Webpack 那样配合 PurgeCSS 做 CSS Tree Shaking，尤其在 Vue 单文件组件里，样式是内嵌的，插件得知道去哪找内容才能删掉没用的类。

你用 rollup-plugin-postcss 的话，它本身不支持自动剔除未使用样式，得配合 purgecss，但关键问题在于：PurgeCSS 没法自动从 .vue 文件里提取 class 名，除非你提前把 SFC 转成纯 JS 输出，或者指定内容源路径。

最稳妥的做法是分两步走：

1. 先用 @rollup/plugin-vue 把 Vue SFC 编译成 JS（输出到临时目录，比如 temp/）
2. 再用 rollup-plugin-purgecss 或 purgecss 配合这个 temp/ 目录做清理

举个实际能跑通的配置例子：

先安装依赖：

npm i -D @rollup/plugin-vue rollup-plugin-purgecss purgecss

然后 rollup.config.js 这样写：

import vue from '@rollup/plugin-vue';

import purgecss from 'rollup-plugin-purgecss';



export default {

  input: 'src/index.js',

  output: {

    file: 'dist/bundle.css',

    format: 'es'

  },

  plugins: [

    vue({

      css: false, // 关键！别让 vue 插件直接输出 CSS，先跳过

      template: { compileTemplate: true }

    }),

    purgecss({

      content: ['temp/**/*.vue'], // 指向编译后 SFC 的路径

      safelist: ['active', /-enter$/, /-leave$/] // 必要的动态类名别删

    })

  ]

};

但这样还不够，因为 @rollup/plugin-vue 默认不输出临时 SFC 文件，所以你得先加一个预处理步骤，比如用 vue-template-compiler 把 template 提前转成 render 函数，或者直接用 rollup-plugin-vue（旧版，兼容性好点）：

npm i -D rollup-plugin-vue@5

然后配置里用这个旧版插件，它默认会生成中间文件，配合 purgecss 就能用：

import vue from 'rollup-plugin-vue';

import purgecss from 'rollup-plugin-purgecss';



export default {

  input: 'src/components/MyComponent.vue',

  output: {

    file: 'dist/bundle.css',

    format: 'es'

  },

  plugins: [

    vue({

      css: false,

      compileTemplate: true

    }),

    purgecss({

      content: ['src/**/*.vue'],

      safelist: ['hidden']

    })

  ]

};

不过更推荐的方案是：别用 PurgeCSS 去扫 SFC，直接在 JS 层做 Tree Shaking。你把 CSS 用 CSS Modules 方式引入，配合 rollup-plugin-postcss-modules，这样没用到的类根本不会进最终 bundle：

// MyComponent.vue

<script>

import styles from './styles.css';

export default {

  setup() {

    return { styles };

  }

};

</script>



<template>

  <div :class="styles.usedClass">测试</div>

</template>

然后 rollup 配置：

import postcss from 'rollup-plugin-postcss';

import autoprefixer from 'autoprefixer';



export default {

  plugins: [

    postcss({

      modules: true,

      extract: true,

      plugins: [autoprefixer()]

    })

  ]

};

这样 Rollup 在处理 JS 时就能识别出 styles.usedClass 被用了，没用到的 styles.unusedClass 就会被 Tree Shaking 掉，最终 CSS 文件里自然就没了。

如果你的项目是组件库，不想改用 CSS Modules，那只能老老实实用 PurgeCSS，但得注意版本兼容问题，rollup-plugin-purgecss 依赖的 purgecss 版本太旧，容易报 content 路径错误，可以自己用 postcss + purgecss 手动拼一个插件，或者升级到 rollup-plugin-postcss@4+，它支持自定义 postcss.plugins，直接加 purgecss 插件进去就行：

import postcss from 'rollup-plugin-postcss';

import purgecss from 'purgecss';



export default {

  plugins: [

    postcss({

      extract: true,

      plugins: [

        purgecss({

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

          safelist: ['active']

        })

      ]

    })

  ]

};

注意 rollup-plugin-postcss@4 用的是 postcss 插件数组，不是 plugins: purgecss() 这种老写法，不然会报错。

总结下：
- 想少折腾 → 用 CSS Modules + Rollup 自带 Tree Shaking
- 想保留全局类名 → 用 rollup-plugin-postcss@4 + purgecss 插件，注意 content 路径别写错，优先扫 .vue 和 .js
- 别用 rollup-plugin-postcss@3 以下版本，它不支持这种写法，容易卡住

我之前就因为用错了版本，一直报 Cannot resolve content path，后来切到 @4 才搞定，你试试看。

处理Rollup打包时未使用的CSS类名问题，官方文档里提到过可以通过配置 rollup-plugin-postcss 插件结合 PurgeCSS 来实现。PurgeCSS 的作用是分析代码中的类名使用情况，并移除未引用的样式。

首先你需要安装依赖，确保安装了 @fullhuman/postcss-purgecss 和 rollup-plugin-postcss，命令大概是这样的：

npm install rollup-plugin-postcss @fullhuman/postcss-purgecss --save-dev

接下来在你的 rollup.config.js 里调整 rollup-plugin-postcss 的配置，加入 PurgeCSS 的逻辑。关键点在于设置 content 属性，它告诉 PurgeCSS 去哪些文件里扫描实际用到的类名。对于 Vue 组件库，通常需要扫描 .vue 文件和 JavaScript 文件。下面是一个完整的配置示例：

import postcss from 'rollup-plugin-postcss';

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



export default {

  plugins: [

    postcss({

      extract: true, // 提取 CSS 到单独文件

      plugins: [

        purgecss({

          content: ['./src/**/*.vue', './src/**/*.js'], // 扫描 src 目录下的 vue 和 js 文件

          defaultExtractor: content => content.match(/[w-/:]+(?<=b)/g) || [] // 自定义提取器

        })

      ]

    })

  ]

};

这里有几个需要注意的地方：
1. content 路径要根据你的项目结构调整，确保能覆盖所有可能包含类名的文件。比如你用了 TypeScript，那可能还需要加上 .ts 文件。
2. defaultExtractor 是用来匹配类名的正则表达式，这个默认配置对大多数场景都适用，但如果遇到特殊命名规则（比如带特殊字符的类名），可能需要自己调整。

另外提一嘴，如果你的项目里有动态生成的类名（比如通过 classList.add() 动态添加的样式），这些类名可能会被误删。这时候可以在 PurgeCSS 配置里加一个 safelist，把这些类名单独列出来，防止被清理掉。例如：

purgecss({

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

  safelist: ['dynamic-class-name'] // 不会被移除的类名

})

最后提醒一下，这种清理工具虽然好用，但调试起来可能会有点麻烦，建议在开发环境关闭 PurgeCSS，在生产环境再启用。你可以通过环境变量来控制插件的行为，比如：

postcss({

  plugins: process.env.NODE_ENV === 'production' ? [purgecss(...)] : []

})

这样可以避免开发阶段因为类名被误删而导致样式错乱的情况。总之就是按需配置，别一股脑全开。