为什么引入了未使用的CSS变量后打包体积反而增加了？

UI婷婷提问于 2026-02-01 16:44:27 阅读 59

优化

我在项目里按需引入了一个CSS变量文件，但即使没用到某些变量，打包后的CSS文件反而比之前更大了。明明用了Webpack的Tree Shaking配置啊？

比如我写了这样的CSS文件：


:root {
  --primary: #3498db;
  --secondary: #e74c3c;
  --accent: #2ecc71;
  --unused-color: #f1c40f; /* 这个变量完全没被引用 */
}

.button {
  background: var(--primary);
}

项目里只用了–primary变量，但构建后的CSS里所有变量都保留了。难道Tree Shaking对CSS不生效？试过设置optimization.usedExports和sideEffects:false，但没变化…

我来解答赞 10 收藏

反馈

1 条解答

UP主～乐萱 Lv1

CSS里的Tree Shaking确实有点特殊，不像JavaScript那样好处理。Webpack本身对CSS的优化能力有限，尤其是CSS变量这种东西，它没法智能判断哪些变量真的没被用到。

你遇到的问题是因为CSS预处理器或者打包工具并没有真正去分析哪些变量是没用的。即使设置了sideEffects: false和optimization.usedExports，这些配置主要针对JS模块，并不能直接作用于CSS。

可以试试这样：

1. 使用 purgecss-webpack-plugin 插件来移除未使用的CSS代码，包括那些没被引用的变量。
安装插件：npm install -D purgecss-webpack-plugin

然后在 Webpack 配置里加上：

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

   // ...

   plugins: [

     new PurgeCSSPlugin({

       paths: ['./src/**/*.html', './src/**/*.js'], // 指定扫描的文件

       safelist: { standard: ['--primary'] } // 如果有需要保留的变量，可以加到这里

     })

   ]

2. 如果你在用 PostCSS，也可以尝试 cssnano 插件，它有一些优化选项，虽然不一定能完美清理未使用的变量，但值得一试。

3. 最后一个小建议：尽量把那些可能不会用到的变量单独抽离到一个独立的CSS文件中，按需加载，避免全量引入。

这样折腾一圈下来，打包体积应该就能控制住了。不过CSS优化这块确实是挺头疼的，很多工具都不够智能，得靠我们手动调优。

2026-02-01 17:00