Framer的打包优化:通过Rolldown加速网站性能

实战案例:Rolldown 助力 Framer 网站提速
阅读 0 分钟

分享

在 Framer,我们对性能有着近乎偏执的追求,这是我们的核心理念。2025 年 9 月,我们宣布了一次重大的基础设施升级,使整个平台的性能得到了大幅提升:正式推出全新的 JavaScript 打包工具 Rolldown。

早在我们发布更新时,我们就知道这不仅仅是工具的简单替换;这是一个战略性举措,旨在更精细地控制我们如何优化 Framer 网站,特别是如何打包和优化 JavaScript 资源。成果立竿见影且影响深远,尤其是在改善核心网页指标最大内容绘制 (LCP) 方面,该指标被 Google 用作排名因素。此外,减少访客需要下载的 JavaScript 量,加快了网站完全可交互的时间。

此外,这为更多增强功能奠定了基础。其中一项功能于 11 月底发布:我们现在使用 Rolldown 独有的技术,称为"native MagicString",它使用高度优化的 Rust 代码来转换 JavaScript 代码。这使我们能够通过即时转换 JavaScript(通过所谓的"AST 转换")以极快的方式进一步提升 CMS 页面的加载性能。更多由 Rolldown 解锁的改进已列入我们 2026 年的路线图。

所有这些都是与 Rolldown 背后的公司 VoidZero 合作的直接成果,我们指导了解锁分块改进的关键实现(我们将在下文介绍什么是"分块")。Rolldown 甚至能够匹配甚至有时超越 esbuild 的打包速度,同时提供所有这些新功能。这意味着,Framer 网站仍然发布得非常快,同时我们正在优化它们,使访客体验越来越快。

我们也很自豪这些创新不仅仅对我们可用。Rolldown 是开源的,因此它们惠及每个其他 Rolldown 和 Vite 用户,为数百万开发者和网站加速网络。

如果您更想了解技术见解,我在 ViteConf 2025 上做了一次演讲——在此观看视频

成果:可衡量的 LCP 和 JS 大小改进

让我们从数据开始。对我们来说最重要的是直接影响用户体验并被 Google 认可为关键绩效指标的指标。

最大内容绘制 (LCP)

对于 LCP,我们在第 75 百分位 (p75) 进行测量,这是 Google 用于其排名因素的标准。对于大型网站,改进最为显著,我们的优化在这些网站上产生了最大影响:

  • 对于超大型网站(JS 包 >2MB),我们看到平均 LCP 改进了 41%*。

  • 对于中型网站(JS 1-2MB),平均 LCP 改进了 4%*。

  • 所有 Framer 网站中,自开始推出以来,我们测得 p90 LCP 下降了 11%*。

改善第 90 百分位是出了名的困难,因为主要是旧设备和慢速 Android 手机属于该类别——所以全面的两位数改进是我们引以为豪的成果。

为确保我们专门测量客户端增强,这些 LCP 改进是在调整首字节时间 (TTFB) 后计算的,有效地将收益隔离到浏览器端渲染,而不是考虑自然的服务器波动。

JavaScript 大小

这些 LCP 收益的主要驱动因素是 JavaScript 大小的大幅减少。这意味着更快的下载速度和浏览器 CPU 的更少工作。我们记录了压缩前后 JS 大小(使用/不使用 Brotli 或 Gzip)的巨大下降:中位数改进 36%(下载字节数更少)。

因素 1:对 JavaScript 分块的精细控制

Rolldown 的另一个重要优势是能够精细调整我们的分块策略,这是我们之前的打包工具 esbuild 所不具备的控制级别。Google 的研究表明,浏览器应处理的并行请求数量存在"最佳点",建议大约 25 个块是获得最佳缓存和加载性能的最优选择。

我们的旧设置在大型网站上可能生成近 100 个块。使用 Rolldown,我们已将数量大大接近这个理想目标:

百分位

Rolldown 之前的块数

Rolldown 之后的块数

p75

67

22

p90

80

30

p99

95

54

如您所见,即使是大型网站现在也接近最佳点,我们计划继续调整配置以进一步优化。

那么,为什么最佳分块如此重要?

  • 减少浏览器开销: 更少的 JS 模块导致浏览器渲染器 (Blink) 和其 JS 引擎 (V8) 之间的进程间通信 (IPC) 开销更少——参见 Chromium 的研究

  • 减少网络开销: 虽然现代协议如 HTTP/3(所有 Framer 网站都使用)效率很高,但更大的文件压缩效果更好,并减少请求/响应头的累积开销。

像 Harry Roberts 这样的专家指出,即使使用 HTTP/2+,打包的重要性仍然存在。在某些情况下,从浏览器缓存加载许多小文件甚至可能比从网络加载单个较大文件更慢

因素 2:更快、更高效的打包引擎

第二个主要因素是新工具链的原始效率。Rolldown 由 oxc-minify 驱动,在压缩速度和最终资源大小方面始终优于 esbuild(基准测试)。这在前面提到的 JS 大小显著减少中发挥了作用。

此外,我们的包现在分割得更加高效。例如,我们内部库的代码、React 和我们的高性能动画库 Motion 现在被分割成三个独立且一致的包。这意味着,如果其中一个更新,其他的保持不变——最大化缓存效率。

这两项变化意味着当您更新网站时,回访访客需要下载的 JS 更少。更小的 JavaScript 占用意味着网络上的数据拥塞更少,解析和编译花费的 CPU 时间更少,尤其是在低端设备上。

展望:更多改进即将到来

除了这些即时改进外,切换到 Rolldown 为我们提供了更好的未来基础。这意味着随着网络标准和最佳实践的变化,我们现在可以调整和发展打包策略。如开头所述,我们已经有 2026 年的计划:

  1. 为 Framer 用户提供更快的发布时间

  2. 进一步减少 Framer 网站访客必须下载的 JavaScript 量

  3. 提升我们画布的性能

我们希望这些见解和成果能让您和我们一样兴奋。敬请期待未来的更多更新。

Create a free website with Framer, the website builder loved by startups, designers and agencies.