为什么Webpack Tree Shaking没摇掉未使用的CSS样式？

公孙东辰提问于 2026-02-16 18:45:28 阅读 9

优化

大家好，我在优化项目时遇到个奇怪的问题。我按文档配置了Tree Shaking，但打包后的CSS里还是有很多没用的样式类。

比如这个组件只用了.red类，但打包结果里blue和green类也存在：


/* styles.css */
.red { color: #ff0000; }
.blue { color: #0000ff; }
.green { color: #00ff00; }

我已经在webpack配置里开启了mode: ‘production’，还加了MiniCssExtractPlugin。尝试过设置sideEffects: false也没用，打包后的vendor.css里这些未引用样式还在。

难道Tree Shaking对CSS不生效？是不是需要额外配置？求大佬指点！

代码分割

我来解答赞 2 收藏

反馈

1 条解答

书希 Lv1

Tree Shaking 是针对 JavaScript 的，CSS 不在它的处理范围内，所以你的配置没生效是正常的。想清理未使用的 CSS，得用专门的工具。代码给你：

const PurgeCSSPlugin = require('purgecss-webpack-plugin');

const glob = require('glob');

const path = require('path');



module.exports = {

  mode: 'production',

  module: {

    rules: [

      {

        test: /.css$/,

        use: ['style-loader', 'css-loader']

      }

    ]

  },

  plugins: [

    new PurgeCSSPlugin({

      paths: glob.sync(${path.join(__dirname, 'src')}/**/*, { nodir: true }),

      safelist: ['red'] // 确保某些类不被误删

    })

  ]

};

这个配置用了 PurgeCSSPlugin，它会分析你的代码，把没用到的 CSS 干掉。记得安装依赖：

npm install purgecss-webpack-plugin glob --save-dev

另外注意两点：
1. 它是基于文件内容分析的，如果你用了动态类名比如 className={dynamic-${type}}，可能会误删，需要在 safelist 里加正则匹配。
2. 开发环境建议关掉这个插件，因为分析过程挺耗时。

对了，别忘了检查 HTML 文件或者模板文件路径，确保 PurgeCSS 能扫描到所有可能用到样式的文件。如果还是有问题，可以再细聊。

2026-02-16 19:03