JavaScript 膨胀于 2024 年
我当时有点跟不上现代前端开发的步伐。我还记得一些关于网页臃肿的文章，网页的平均大小已接近几兆字节！
所以一直以来，我都以为，如果网页的平均大小是 3 MB，那么 JavaScript bundle 的大小就应该在 1 MB 左右。当然，内容还是应该占大多数，不是吗？
要想弄清楚，那么，唯一的办法就是搞点事情。让我们来做个现实测试！
我写这篇文章的时候是 2024 年，也许几年后还能再写续集？
方法
- MacOS 上的火狐浏览器（但在任何浏览器中都应如此）
- 非隐身（我想看到程序内的数据，而且更有可能与实际的日常体验相似）
- 禁用所有扩展
- JavaScript only
- 未压缩
- 启用 Workers （同样，更贴近现实生活）
- 禁用所有缓存（冷负载）
为什么只有 JavaScript？不同网站的内容差异很大（YouTube 上的视频肯定比 Slack 上的文本信息更重要），但 JavaScript 是衡量 "交互复杂性 "的通用指标。
主要目标是评估浏览器解析和执行代码的工作量。
为了设定一些基准线，让我们从这个博客开始：
这里的数字是 0.004 MB。我还强调了所有重要的设置，如果你决定在家里复制这个程序的话。
首页
好吧，让我们从简单的东西开始，比如着陆页/非交互式应用程序。
一个普通的略微互动的页面是这样的 - 维基百科，0.2 MB：
略显臃肿 - 像这样 - Linear，3 MB：
请记住：这还不包括图片、视频甚至CSS样式！只有 JS 代码。
糟糕的登陆页面看起来就像这样 - Zoom，6 MB：
或者像 Vercel 一样，6 MB：
是的，这只是一个登陆页面。没有应用程序，没有功能，没有调用。6 MB 的 JavaScript 仅用于此。
不过，你还可以做得更好--Gitlab，13 MB：
仍然只是首页。
静态网站
没有什么比显示静态的文字墙更简单的了。Medium 仅此一项就需要 3 MB：
Substack 需要 4 MB：
进步？
Quora, 4.5 MB:
Pinterest, 10 MB:
Patreon, 11 MB:
而这一切本可以是一个静态页面......
搜索页面
当您的应用程序的交互性仅限于搜索时。输入查询 - 显示结果列表。这有多繁重？
StackOverflow, 3.5 MB:
NPM, 4 MB:
Airbnb, 7 MB:
Booking.com, 12 MB:
但是 Niki，booking 太复杂了！看看这些用户界面 ，所有这些弹出窗口，都是关于你附近的人抢了你的假期。
好吧，好吧那就简单点谷歌谷歌怎么样？一个文本字段，链接列表。对不对？
那么，它将用去你你高达 9 MB 的流量：
只是为了显示链接列表。
简单的单交互应用程序
谷歌翻译只有两个文本框。为此，您需要 2.5 MB：
ChatGPT 只是一个文本框， 7 MB:
我的意思是，ChatGPT 当然很复杂。但这是在服务器上，而不是在浏览器中！
视频网站
Loom — 7 MB:
YouTube — 12 MB:
与真正关心性能的人相比 — Pornhub, 1.4 MB:
音频页面
我猜音频无论如何都需要 12 MB：
SoundCloud:
Spotify:
好吧，视频和音频可能是重头戏（尽管我们不是在测量内容，只是在测量 JS，记住！）。让我们转向更简单的办公任务。
谷歌邮件只有 20 MB：
这是一个该死的邮箱！！！它怎么会和 Figma 一样大？Figma 为他们的应用程序提供了完整的自定义 C++/OpenGL 渲染服务。
如果你在想：邮件也很复杂。大量的用户界面，大量的交互性。也许 20 MB 就可以了？
No!
就是不。看，FastMail，同样的交易，但只有 2 MB。少了 10 倍！
效率办公
好吧，也许电子邮件太复杂了？用更简单的方法怎么样？比如 TODO 列表？
那么，来看看 9 MB 的 Todoist 吧：
在 Dropbox 中显示文件夹中的文件列表需要 10 MB：
密码列表？1Password 要 13 MB：
卡？再增加 0.5 MB，最多可达 13.5 MB。Trello：
好吧，也许 TODO 列表也太复杂了？聊天怎么样？
而 Discord 需要 21 MB 才能做到这一点：
文件编辑
好吧，文档编辑很难，对吧？你必须实现光标移动、同步等功能。
Google Docs, 13.5 MB:
更简单的吗？Notion，16 MB：
社交网络
社交网络的 "喜欢 "按钮所需的代码大小一般为 12 MB。
Twitter, 11 MB:
Facebook, 12 MB:
TikTok, 12.5 MB:
Instagram 在某种程度上比 Facebook 更大，尽管其功能少了 10 倍。16 MB：
LinkedIn.是博客？还是平台？它有搜索、有消息、有社交功能。总之，这将是 31 MB：
顺便说一下，我想把您加入我在 LinkedIn 上的专业网络。
大象--自成一类
有时，网站的规模大得愚蠢、荒唐，以至于应该有自己的分类。
这里是任务管理软件 Jira。近 50 MB！
他们是将整个 Electron 编译成 WASM 还是什么？
但这还不是极限！Slack 会再增加 5 MB，最多可达 55 MB：
是的，这是一个聊天工具。你知道，用户列表、消息、反应。甚至在 JS 发明之前，我们在原始 HTML 上做过的东西？
在当今世界，这相当于 55 MB。这几乎就像是他们在试探，在浏览器崩溃之前，还能往里面放多少废话。
最后，这让我大吃一惊。不知为何，react.dev 一开始只有 2 MB，但当你来回滚动时，它就会无限增大。为了好玩，我把它加到了 100 MB（JavaScript！），不过你也可以随心所欲：
这是怎么回事？即使它卸载并下载了博文的部分内容，它怎么会增长得这么快？文本本身可能只有 50 KB（0.05 MB）。
更新：我注意到这种行为实际上并不代表正常的用户体验。通常，嵌入式代码编辑器在首次加载后会被缓存，随后的加载将从磁盘缓存中进行。因此，当你滚动时，不会看到任何网络流量，但这 100 MB 的 JS 仍会在你滚动时一次又一次地被解析、评估和初始化。
我们的膨胀的速度有多快？
看看多可爱！2015 年，网页平均大小接近共享软件版本的 Doom 1（2.5 MB）：
在 2024 年，Slack 的大小为 55 MB，相当于包含所有资源的原版 Quake 1 的大小。但现在仅 JavaScript 就有这么大。
对于聊天应用来说
10 MB 到底有多大？
老实说，写完这些数字后，10 MB 甚至感觉不到有多大或有多特别。现在看来，发送 10 MB 的代码已经很平常了。
如果我们假设平均每行代码约为 65 个字符，那么这意味着我们要发送约 15 万行代码。每个网站都是如此！有时只是为了显示静态内容！
而且这些代码已经进行了最小化处理。因此，仅一个网站就需要 30 多万行代码。
但现代网站真的有那么复杂吗？以现代标准衡量，SPA 的典型代表谷歌地图（Google Maps）并不复杂，仍然只有 4.5 MB：
谷歌的某些人严重落后了。使用现代前端技术编写的文件至少应有 20 MB。
如果你和我一样，认为 "Figma 是一款非常复杂的前端应用程序，因此它的 javascript 下载量一定很大"，那么，这是正确的，但 Gmail 的复杂程度与 Figma 不相上下，LinkedIn 比 Figma 复杂 1.5 倍，Slack 比 Figma 复杂 2.5 倍。 ¯\_(ツ)_/¯
结论
这不仅仅是下载大小的问题。我和其他人一样欢迎高速网络。但代码--JavaScript--是浏览器必须解析、保存在内存中并执行的东西。这可不是免费的。而这些人却在谈论性能和电池寿命......
你可以说我守旧，但我坚信内容应该大于代码大小。如果你写的是一篇 10K 字的博文，你不需要 1000 倍的 JavaScript 来呈现它。
这个网站做得很好：
这是 0.1 MB。这就足够了！
然而，在同一个互联网上，在同样的时间轴上，Gitlab 需要 13 MB 的代码，500K LoC 以上的 JS，才能显示一个静态的登陆页面。
Fuck me.