Vite：JS树摇后通过PurgeCSS处理CSS的构建配置咨询

一、构建钩子设置（以Webpack为例） #

要确保PurgeCSS分析的是树摇后最终打包的JS代码，需要把它的执行时机放在JS打包完成之后。以下是两种可行方案：

方法1：自定义Webpack插件（精准控制时机） #

通过Webpack的emit钩子（文件输出到磁盘前触发），此时JS已完成树摇，CSS已被提取但还未生成最终哈希文件名，正好适合处理：

const PurgeCSS = require('purgecss').PurgeCSS;

class PurgeCSSAfterTreeShakePlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('PurgeCSSAfterTreeShakePlugin', (compilation, callback) => {
      // 1. 拿到树摇后的JS内容
      const jsAsset = Object.values(compilation.assets).find(asset => asset.name.endsWith('.js'));
      if (!jsAsset) {
        callback();
        return;
      }
      const jsContent = jsAsset.source();

      // 2. 遍历所有待处理的CSS资源
      const cssAssets = Object.entries(compilation.assets).filter(([name]) => name.endsWith('.css'));

      Promise.all(
        cssAssets.map(async ([name, asset]) => {
          const rawCss = asset.source();
          // 3. 用PurgeCSS基于JS内容清理无用CSS
          const purgeResult = await new PurgeCSS().purge({
            content: [{ raw: jsContent, extension: 'js' }],
            css: [{ raw: rawCss }],
            // 自定义白名单、提取器等配置
            safelist: { standard: ['html', 'body'] },
            extractors: [
              {
                extractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
                extensions: ['js']
              }
            ]
          });
          // 4. 替换CSS资源内容为清理后的版本
          compilation.assets[name] = {
            source: () => purgeResult[0].css,
            size: () => purgeResult[0].css.length
          };
        })
      ).then(() => callback()).catch(err => callback(err));
    });
  }
}

// Webpack配置中注册插件
module.exports = {
  output: {
    filename: 'main.[contenthash].js',
    assetModuleFilename: '[name].[contenthash][ext]'
  },
  plugins: [
    // 先配置CSS提取插件（如mini-css-extract-plugin）
    new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' }),
    new PurgeCSSAfterTreeShakePlugin()
  ],
  // 确保开启树摇
  optimization: {
    usedExports: true,
    minimize: true
  }
};

方法2：用Shell插件执行PurgeCLI（快速实现） #

如果不想写自定义插件，可用webpack-shell-plugin-next在构建完成后调用PurgeCSS命令行工具：

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' }),
    new WebpackShellPluginNext({
      onAfterBuild: {
        scripts: [
          // 分析打包后的JS，清理CSS并覆盖原文件
          'purgecss --content dist/main.*.js --css dist/styles.*.css --output dist/'
        ],
        blocking: true,
        parallel: false
      }
    })
  ]
};

二、保留内容哈希文件名 #

上面的第一种方案完美解决哈希问题：在Webpack计算[contenthash]之前就完成了CSS清理，最终文件名的哈希是基于清理后的CSS内容生成的，完全符合需求。

如果用第二种Shell方案，需要注意：Webpack先基于原CSS生成哈希文件名，清理后内容变化但哈希不会自动更新。若要解决这个问题，可先让Webpack输出无哈希的临时文件，清理后再手动添加哈希并重命名，同时更新JS中引用的CSS文件名（相对繁琐，更推荐第一种方案）。

关键注意事项 #

• 必须开启Webpack树摇：确保optimization.usedExports: true和minimize: true，TerserPlugin会移除未使用的JS代码
• 适配动态选择器：如果JS中有动态生成的className（如React的clsx），需要调整PurgeCSS的提取器或添加白名单，避免误删有用样式
• 其他构建工具适配：比如Vite可通过build.onEnd钩子实现类似逻辑，核心都是找到JS树摇完成、CSS未最终输出的时机执行PurgeCSS

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