如何为CSS文件设置合理的性能预算？

志达🍀 提问于 2026-03-03 23:57:23 阅读 12

前端

我们团队最近在做性能优化，想给CSS资源设置一个性能预算，比如限制主样式文件不超过100KB。但我发现即使我删掉了很多样式，打包后的CSS还是超了。是不是有些隐藏的开销没考虑到？

比如下面这段基础重置样式，看起来很短，但加上各种组件库和工具类之后体积就爆炸了：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

有没有什么工具或方法能准确分析CSS体积构成？或者怎么在构建时自动检查是否超出预算？

我来解答赞 5 收藏

反馈

1 条解答

A. 东焕 Lv1

这事儿我熟，删几行重置代码根本没用，CSS体积爆炸通常就那几个原因。首先得搞清楚到底是谁在占空间，别瞎删。

最常见的解决方案是用 webpack-bundle-analyzer 这个插件。它能生成一个可视化的树状图，一眼就能看到哪个文件、哪个模块把体积撑大了。很多时候你以为只是样式，结果发现是 Base64 编码的图片或者 SVG 图标塞在里面了，这才是真正的体积杀手。如果是这种情况，把图片抽离出来或者用字体图标代替，体积立马掉一半。

另外一个隐藏开销是死代码。很多组件库引入了全套样式，但你只用了一两个按钮。这时候得用 PurgeCSS 或者 CSSNano 这种工具去摇树优化，把没用的样式干掉。Chrome DevTools 里的 Coverage 标签页也能帮你看看有多少 CSS 是根本没被用到的，那个红色区域看着都心疼。

关于你提到的构建时自动检查，直接在 webpack 配置里加 performance 字段就行。这是官方自带的功能，不用额外装乱七八糟的包。

配置代码如下：

module.exports = {

  // ...其他配置

  performance: {

    hints: process.env.NODE_ENV === 'production' ? 'warning' : false,

    maxEntrypointSize: 102400, // 限制主入口 100KB (单位是字节)

    maxAssetSize: 102400,      // 限制单个资源 100KB

    // 你还可以针对特定文件做过滤

    assetFilter: function(assetFilename) {

      return assetFilename.endsWith('.css');

    }

  }

};

设置好 maxEntrypointSize，超过这个阈值构建就会报警或者直接报错，强制你优化。建议先开 warning 模式跑两天，看看团队里谁的代码最臃肿，然后再改成 error 强制执行。别上来就一刀切，容易被打。

2026-03-04 13:53