Swarms Logo
产品工程

Swarms Marketplace 提速:41 个页面改由边缘节点提供,每个页面加载的 JavaScript 更少

本周我们重做了 swarms.world 的页面交付方式。41 个页面现在预先渲染并由 CDN 提供,大多数页面加载的 JavaScript 减少了约四分之一,应用也升级到了 Next.js 16 和 React 19。本文介绍改了什么,以及我们测到了什么。

Swarms Team5 分钟阅读
Swarms Marketplace 提速:41 个页面改由边缘节点提供,每个页面加载的 JavaScript 更少

本周我们对 Swarms Marketplace 做了一轮性能优化。市场的功能和以前一样,变化在于页面更快到达你的浏览器,浏览器在可以操作之前需要下载的内容也更少。

这次上线了三项改动:

  1. 41 个页面现在由 CDN 提供,不再每次访问都在服务器上重新生成。
  2. 大多数页面加载的 JavaScript 减少了约四分之一,因为钱包和动画代码改为按需加载。
  3. 应用升级到 Next.js 16 和 React 19,我们自己的构建速度提高到原来的约三倍。

下面用通俗的话解释每项改动,给出数据,并说明这些数据是怎么测的。

数据

测量项之前之后
由 CDN 提供的页面数041
服务器响应时间,已登录,定价页236 毫秒62 毫秒
服务器响应时间,已登录,开发者页185 毫秒45 毫秒
服务器响应时间,已登录,首页282 毫秒126 毫秒
主要内容绘制完成,定价页1,004 毫秒344 毫秒
首次加载的 JavaScript,首页577 KB446 KB
首次加载的 JavaScript,探索页557 KB412 KB
首次加载的 JavaScript,定价页567 KB419 KB
Helvetica 字体文件333 KB237 KB
生产构建时间52.6 秒19.0 秒

以上数据都来自同一台机器上并排运行的新旧两个生产构建,并不是在 swarms.world 线上测得的,所以请把它们看作两个版本之间的对比。你实际感受到的速度取决于设备和网络。JavaScript 体积为 gzip 压缩后的大小。

页面由边缘节点提供

在本周之前,swarms.world 的每个页面都是在你请求的那一刻由服务器生成的,包括定价页、开发者文档这类对所有人都一样的页面。

原因出在包裹所有页面的布局里的一处逻辑。它在服务器上读取你的登录 cookie,用来判断是否把你显示为已登录。因为每个请求都会这样做,框架只能把每个页面都当作个人化内容,CDN 上什么都存不了。

我们把这项检查移到了浏览器里。现在页面先到达,浏览器随后再确认你的身份。服务器不再读取 cookie 之后,41 个页面可以在部署时一次生成,再由离你最近的 CDN 节点提供。其中包括首页、定价页、开发者页、frenzy、筛选器、法律条款页面,以及仪表盘和账户页面的外壳。

两个实时数据接口也做了类似的小改动。竞赛排行榜和 frenzy 价格数据对每位访客都相同,所以现在 CDN 用一份共享副本来响应,分别每 30 秒和每 5 秒刷新一次。以前每个打开的标签页都要单独请求服务器。

这里有一个看得见的取舍。如果你已登录,在账户信息出现之前,你可能会短暂看到未登录状态的导航栏。这是向所有人提供同一份缓存页面的代价。

更少的 JavaScript

以前每个页面在可以交互之前要下载 560 到 740 KB 的 JavaScript。我们分析其中的内容后,发现有两部分特别突出。

钱包代码。 Solana 钱包适配器、交易库和钱包选择器在每个页面都会加载,约 125 KB,即使页面上没有任何需要购买或签名的操作。现在这些代码只在用得上时才加载:你点击 Connect Wallet 时、你以前连接过钱包时,或者你是用 Phantom 登录的。其他访客不会再下载它。

动画代码。 完整的动画库以前随导航栏一起加载。现在页面只带一个很小的核心,其余部分在首次绘制之后再获取。

这两项加在一起,使大多数页面首次加载的 JavaScript 减少了 23% 到 26%。产品页和筛选器减少了约 9% 到 12%,因为这些页面本身会用到更多这类代码。

我们还把网站的 Helvetica 字体转成了 WOFF2,体积缩小了 29%。图片优化器现在会向支持的浏览器提供 AVIF 格式,在一张示例图片上比原来的 WebP 小 28%。

Next.js 16 和 React 19

市场现在运行在 Next.js 16 和 React 19 上。对访客来说,这项变化基本看不出来。对我们来说,生产构建从 53 秒缩短到 19 秒,开发服务器编译页面的速度大约快了一倍。构建更快,修复和新功能就能更早交到你手上。

总结

这一轮优化让市场更快到达、加载更轻。41 个页面现在由离你最近的 CDN 节点提供,大多数页面在可以操作之前下载的 JavaScript 减少了约四分之一,字体和图片也更小。在底层,Next.js 16 和 React 19 把我们的构建时间缩短了将近三分之二,改进可以更早上线。

速度是我们会持续投入的方向,每次都会用同样的方法测量并公布数据。

试试看

打开 swarms.world 随便点一点。定价页、开发者页、frenzy 和筛选器是最容易感受到差别的地方。

浏览市场: swarms.world

发布你自己的智能体: swarms.world/launch