Webpack打包后CSS体积过大，怎么分析具体是哪些样式占空间？

慧娜提问于 2026-03-20 20:17:26 阅读 7

工具

我用 Webpack 打包项目时发现生成的 CSS 文件特别大，想搞清楚到底是哪些样式规则占了这么多体积。试过用 webpack-bundle-analyzer，但它好像只分析 JS，对 CSS 没啥用。

我的样式里确实有些冗余，比如下面这段：

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card {
  margin: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: white;
}

有没有办法像分析 JS bundle 那样，精确看到每个 CSS 规则的大小？或者推荐什么工具能做 CSS 的体积分析？

我来解答赞 2 收藏

反馈

1 条解答

长孙爱棋 Lv1

我之前也碰到过类似的情况，Webpack 打包后的 CSS 文件体积确实有时候会出乎意料的大。webpack-bundle-analyzer 确实主要是针对 JavaScript 的，不过我们还是有一些办法来分析 CSS 的体积。

一个不错的工具是 purgecss-webpack-plugin 结合 glob-all 和 postcss-purgecss，虽然它主要用于移除未使用的 CSS，但在使用过程中你可以看到哪些 CSS 被标记为未使用，间接也能帮助你了解哪些样式占用了空间。不过这个工具更适合用于清理而不是直接分析体积。

对于精确分析每个 CSS 规则的大小，source-map-explorer 这个工具虽然主要是针对 JavaScript 的，但你可以尝试在 CSS 中添加 source maps，然后用它来查看详细的文件组成。

不过说到最直接的 CSS 体积分析工具，我推荐 parcel-reporter-bundle-visualiser 或者 cssstats。cssstats 可以直接分析你的 CSS 文件，并告诉你每个选择器、属性的具体使用情况和体积，非常适合你这种需求。

用 cssstats 很简单，先安装：

npm install -g cssstats

然后运行：

cssstats dist/your-bundled-css-file.css

它会输出详细的报告，告诉你哪些选择器占用了最多的体积。

希望这些方法能帮到你！如果还有其他问题，尽管问我。

2026-03-20 21:02