使用Rollup插件TreeShake Bootstrap CSS遇阻，求解决方案

Rollup自带的treeshake特性仅针对JavaScript模块生效，无法直接处理CSS冗余代码。要实现CSS的TreeShake（移除未使用的选择器），需要借助专门工具配合PostCSS插件完成，最常用的方案是使用PurgeCSS。

具体实现步骤 #

1. 安装依赖
   安装PostCSS版的PurgeCSS：

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

2. 修改Rollup配置
   在PostCSS插件中添加PurgeCSS配置，指定需要扫描的文件（用来识别哪些CSS选择器被实际使用），同时可配置保留必要的类（比如动态生成的Bootstrap类）：

   export default [
     {
       input: "path/to/index.js",
       output: [
         {
           format: "esm",
           file: "path/to/output/index.min.js",
         },
       ],
       treeshake: true,
       plugins: [
         postcss({
           extract: true,
           plugins: [
             cssnano(),
             // 添加PurgeCSS配置
             require('@fullhuman/postcss-purgecss')({
               // 扫描所有包含CSS类引用的文件：HTML、JS、组件文件等
               content: [
                 './path/to/*.html',
                 './path/to/**/*.js',
                 // 如有其他类型文件（如Vue/React组件）需补充路径
               ],
               // 保留Bootstrap响应式类、工具类等动态可能用到的样式
               safelist: {
                 standard: [/^bg-/, /^text-/, /^d-/, /^container/],
                 // 自定义动态类可在此添加正则或具体类名
               },
               // 自定义类名提取规则，确保正确识别代码中的CSS类
               defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
             })
           ],
           extensions: [".css"],
         }),
         resolve(),
         commonjs(),
         terser(),
       ],
     },
   ]
   

3. 关键配置说明

   • content：必须包含所有会使用到CSS类的文件路径，PurgeCSS会扫描这些文件中的类名，仅保留匹配到的CSS选择器。
   • safelist：用于保留无法被静态扫描到的类（比如JS动态添加的类、Bootstrap响应式类），避免误删必要样式。
   • defaultExtractor：自定义类名提取规则，确保能正确识别代码中的各类CSS类写法。

注意事项 #

• 若项目使用动态生成的类名（如btn-${type}），需在safelist中通过正则表达式匹配这类模式，防止相关样式被误删。
• PurgeCSS基于静态扫描，无法识别完全动态生成的类（如后端接口返回的类名），这类情况需手动添加到safelist。
• 打包后需测试页面样式，确认无必要样式被误删，再调整safelist配置。

内容的提问来源于stack exchange，提问作者shadow