资源压缩后首屏加载反而变慢了，怎么回事？

百里爱景提问于 2026-03-31 10:57:15 阅读 3

优化

我们项目最近做了资源压缩优化，把 JS 和 CSS 都用 webpack 压缩了，还启用了 Gzip。但奇怪的是，上线后 Lighthouse 测出来的首屏时间反而比之前高了 0.5s 左右。本地测试时明明变快了啊……

我检查过网络面板，压缩后的文件体积确实小了很多，比如主 bundle 从 1.2MB 降到了 480KB。服务器也确认返回了 Content-Encoding: gzip。难道是压缩率太高导致浏览器解压变慢？还是我哪里配置错了？

这是我的 webpack 压缩配置：

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true,
          pure_funcs: ['console.log'],
        },
        mangle: true,
      },
      parallel: true,
    }),
  ],
}

资源压缩

我来解答赞 6 收藏

反馈

1 条解答

轩辕世暄 Lv1

你遇到的问题很可能跟压缩配置没关系，反而是其他因素在作祟。首屏加载时间变长的原因很多，我建议先排查几个常见问题。

首先检查下你的资源缓存策略是否合理设置。浏览器缓存没利用好，每次都要重新下载资源，这可比解压耗时多了。标准写法是用 Cache-Control 或 ETag 控制缓存，具体可以看看 HTTP/1.1 协议相关章节。

另外，虽然文件体积减小了，但压缩后的资源可能影响了并行加载。特别是如果把多个小文件合并成一个大文件，反而会阻塞后续资源的加载。你可以观察网络面板里关键资源的加载顺序。

说到 Gzip，要注意它的最佳实践：服务端要正确配置 Vary: Accept-Encoding 头，不然可能会导致中间缓存代理出问题。我也碰到过类似情况，明明压缩了结果 CDN 里全是未压缩的内容。

对了，TerserPlugin 的配置看起来没问题，不过 mangle 这个选项要注意调试阶段最好关掉，容易引入奇怪的错误。我之前就因为这个 debug 到头秃。

最后给个建议，优化是个系统工程，得从多个维度看。可以用 Chrome DevTools 分析下具体是哪个环节拖慢了速度，说不定会有意外发现。

2026-03-31 11:01