我有点跟不上现代前端开发的步伐。我还记得一些关于网页臃肿的文章，以及平均网页大小如何接近几兆字节！

因此，我一直以为，如果网页的平均大小是 3 MB，那么 JavaScript bundle 的大小就应该是 1 MB 左右。当然，内容还是应该占大多数，不是吗？

那么，唯一的办法就是到处乱搞。让我们来看看现实！

我写这篇文章的时候是 2024 年，所以也许过几年再写续篇吧？

方法

• 在 macOS 上使用火狐浏览器（但在任何浏览器上都一样）
• 非隐身（我想看到应用内的数字，这样更有可能与实际的日常体验相似）
• 禁用所有扩展
• 仅 JavaScript
• 未压缩
• 启用服务 Worker（同样，更贴近现实生活）
• 禁用所有缓存（冷加载）

为什么只使用 JavaScript？不同网站的内容差别很大（YouTube 上的视频肯定比 Slack 上的文本信息要重），但 JavaScript 是衡量 "交互复杂性 "的通用指标。

主要目的是评估浏览器解析和执行代码的工作量。

为了设定基准线，让我们从本博客开始：（译注：本翻译页中将不包含后续网页图片，如果需要请在原网页中查看）

这里的数字是 0.004 MB。如果你决定在家里重现这个过程，我还强调了你需要设置的所有重要部分。

登陆

好吧，让我们从简单的东西开始，比如登陆页面/非交互式应用程序。

一个普通的略带交互性的页面看起来像这样--维基百科，0.2 MB：