使用热门静态网站托管平台的付费方案来测量 Gatsby 项目的构建时间
Jamstack 近来发展迅猛。几乎每个月都有越来越多的工具和框架涌现，为静态网站生成这一概念注入了新的活力。
在Pixel Point，我们构建网站的首选框架一直是 Gatsby。三年前，当我们刚开始使用它时，网站部署的选择并不多——只有 Netlify或Vercel。现在情况大不相同，除了Gatsby Cloud，还有Cloudflare Pages、AWS Amplify等服务，甚至可以使用Waypoint等项目在自己的基础设施中创建类似的构建工具。
静态网站有一个显著的缺点——构建时间。如果你的网站规模较小，比如只有博客或单页网站，那么所有主机或框架的构建结果都差不多，差别不大。但当网站页面超过100页时，情况就变得非常糟糕了。在这种情况下，平台对于开发者、设计师和营销人员来说，在构建性能方面可以发挥巨大的作用，因为没有人愿意等待数小时才能看到更改生效。
所以我决定在最流行的平台上使用付费套餐进行测试。
目录
平台
Netlify
专业版套餐 - 每位会员每月 20 美元。
维塞尔
专业版套餐 - 每位会员每月 20 美元。
Gatsby 云
专业版套餐 - 50 美元/月，包含 2 个席位，每增加一名成员加收 20 美元。
Cloudflare 页面
专业版套餐 - 每月 20 美元，不限座位。
AWS Amplify
前 1000 分钟免费，之后每分钟 0.01 美元。
自托管
每月 50 美元，即可获得一台运行 Drone CI 的自托管服务器，配置如下：AMD Ryzen 5 3600 六核“Matisse”（Zen2 架构）、64GB 内存、512GB RAID NVME SSD。不限席位。使用 netlify-cli 部署到 Netlify。
测试用例
我首先测试了清理缓存后的构建性能。虽然通常情况下缓存运行良好并能缩短构建时间，但仍然有一些情况下需要手动清理缓存，或者当 gatsby-node.js、gatsby-config.js 或 package.json 文件发生更改时，Gatsby 会自动清理缓存。
每个测试我都运行了五次，然后记录平均值。我还用秒表计时，以确保实际的完成通知和用户界面显示的数字之间没有显著差异。使用秒表的目的并非精确测量，而是为了弄清楚平台是否显示了真实的完成时间，以及是否会从构建时间中扣除某些阶段（例如环境初始化或发布）的时间。
基于 Markdown 的网站
清理缓存构建时间
测试首先测试的是一个基于 Markdown 的网站。结果相当令人惊讶。Gatsby Cloud 仅用了两分钟就完成了任务，比 Netlify 快了八倍——快了 16 倍。Gatsby Cloud 的测试结果与我在本地 Apple M1 芯片上运行构建的结果非常接近，这简直不可思议。我相信他们在幕后肯定做了一些巧妙的处理，至少包括并行镜像优化。
Vercel 比 Cloudflare 页面略快，完成时间为 10 分 30 秒，而 Cloudflare 页面完成时间为 11 分 23 秒。我明显低估了 AWS Amplify，以为他们会在免费套餐的 EC2 实例上运行构建，但他们实际上是在一台拥有 4 个 vCPU 和 7GB 内存的主机上运行构建（UI 的这种透明度值得称赞），因此最终完成时间为 9 分 47 秒。
自托管解决方案速度相对较快，构建时间与 Gatsby Cloud 非常接近，但将结果上传到 Netlify 需要大约一半的时间，因此排名第二。
有趣的是，Gatsby Cloud 完成整个构建所需的时间，与 Cloudflare 初始化环境所需的时间相同。
部署预览构建时间
我开始觉得这将是一场生死竞赛，因为竞争对手开始暴露各自的问题以及他们处理不同场景的方式。在部署预览测试中，我从主分支创建了一个单独的分支，并在一个 jsx 文件和 md 文件中分别做了两处修改。
Netlify (16:16)、Cloudflare (11:16) 和 AWS Amplify (9:14) 的测试结果最慢，原因如下。Netlify 有一个不错的插件，可以在构建之间保留缓存，但是如果构建时间超过 15 分钟，该插件就无法正常工作。
Cloudflare Pages 没有在构建之间保留缓存的选项，因此每次都会显示缓慢的结果。
AWS Amplify 提供了一个缓存持久化的选项，但他们的所有官方文档都没有提供如何启用该功能的信息。简单地将必要的文件夹添加到构建 YAML 文件中是行不通的。在花费了相当长的时间研究之后，我放弃了这个方案，因为我确信他们的用户也不会深入研究这个问题。如果没有相应的配置，唯一能在构建之间保留的只有 node_modules 目录。
Vercel 做得非常出色，仅用了 3 分 32 秒就完成了。我对这个结果印象深刻，因为所有的缓存机制都在后台运行，无需在平台和代码中安装额外的 Gatsby 插件即可使其正常工作。
Gatsby Cloud 再次胜出，用时 0:49，而自托管版本仅落后 25 秒。
热缓存构建时间
所谓“热缓存构建时间”，指的是在上次构建所在的同一分支上运行的后续构建。这种情况会在您因内容更改而重新部署网站或向 Pull Request 提交新代码时发生。
Vercel（1:08）和 Selfhosted（1:06）的成绩非常接近，但 Gatsby Cloud 以 0:27 的速度更快。
Cloudflare Pages 和 Netlify，尤其是 AWS Netlify，肯定还有改进的空间。
无头 WordPress 网站
然后我开始测试 Gatsby v4 与 WordPress 网站的连接。该网站有两种语言，安装了一系列常用的 WordPress 插件，总共大约有 1000 个页面。挑战就此开始。
清理缓存构建时间
Netlify 甚至还没完成构建，22 分钟后就停止了。Vercel 和 Cloudflare 的页面在 24 分钟内完成。Gatsby Cloud 速度很快，但即使对它来说也有些吃力——耗时 17 分 47 秒。AWS Amplify 的表现最令人惊喜，稳定在 15 分钟左右。自托管的 CI 速度最快——11 分 30 秒。我们托管的服务器可能离 WordPress 主机更近，因此初始资源下载速度更快。
部署预览构建时间
我想我们可以认为 Cloudflare、Netlify 和 AWS Amplify 在本轮测试中表现不佳，所以我们直接来看 Vercel。部署预览版耗时 2 分 39 秒，这是一个非常不错的成绩。Gatsby Cloud 完成同样的任务仅用了 1 分 45 秒，而自托管版本则用时 1 分 23 秒。
热缓存构建时间
Vercel 的测试结果与 Deploy Preview 版本并无差异。但对于 Gatsby Cloud 而言，耗时缩短了 20 秒。自托管版本也取得了同样出色的结果。不过需要说明的是，自托管版本通过 Netlify CLI 上传文件时，曾出现过一次耗时超过 6 分钟的情况。由于这种情况仅发生过一次，因此我决定不将其纳入测试结果。
奖金
如果没有再展示一点，那就不算完整。以上所有测试都是在单个 jsx 文件和一篇博客文章中进行的。但如果您更改内容（例如来自 WordPress/Contentful/Prismic 等 CMS），Gatsby Cloud 可以做什么呢？这种情况最为常见。
从架构角度来看，根据构建日志，Gatsby Cloud 似乎会将生产版本的最新实例保持在休眠状态，然后快速唤醒它并跳过一些构建步骤，并且知道内容差异后可以非常快速地生成新的构建。
从在内容管理系统 (CMS) 中修改内容到在生产环境中看到更新，仅仅用了 20 秒！这太令人印象深刻了。几年前，当Gatsby 的创始人Kyle Mathews说他们要让网站在几秒钟内重建时，我对此非常怀疑，但现在看来这似乎是真的。干得漂亮！
注意： 只有修改文章或页面才能达到此效果。如果修改共享数据（例如菜单），则需要重建每个页面，最终耗时约 50 秒。
获奖者
Gatsby Cloud 在构建速度方面表现出色，赢得了这场性能竞赛。我相信它使用了比其他平台更强大的硬件，并在后台进行了一些优化。Vercel 仍然是一个强劲的竞争对手。虽然它在冷启动时表现不佳，但缓存改变了一切。与客户交流时，我们提到，构建时间少于 10 分钟时，没有人会太在意；但一旦超过这个阈值，就会有人询问如何才能更快。因此，考虑到这一点，我绝对会推荐 Gatsby 和 Vercel 这两种解决方案。
尽管我非常喜欢 Cloudflare 的产品，也乐于分享它们的优点，但 Pages 感觉是他们产品线中最弱的一个。它的开发进度非常缓慢，而且自从第一个 beta 版发布以来，至今为止几乎没有任何重大改进。在我看来，Cloudflare 的定价方案是最经济实惠的，而且没有席位和带宽限制。所以，让我们继续观察吧。
AWS Amplify……还能说什么呢？毕竟是 AWS。如果你喜欢他们的服务，而且觉得他们的用户体验还可以接受，那它或许还是个不错的选择。它的配置是 YAML 文件，启用预览部署和构建其他分支也需要单独的设置。而且它默认缺少缓存控制策略。所有这些都让它显得不太理想。
我认为，Netlify 仍然是市场上最受欢迎且价格非常实惠的解决方案。它拥有出色的用户界面和强大的功能集，但如果您的网站扩展速度过快，构建时间可能会成为一个严重的瓶颈。
自托管方案速度快，没有任何限制，而且一台性能非常强大的机器每月只需 50 美元；但是，您需要记住，您可能至少偶尔需要花费几个小时来设置它。
想了解更多关于 Gatsby、Next.js 以及如何构建高性能、视觉效果惊艳的网站的技巧吗？请在 Twitter 上关注我。
无头 WordPress 网站源代码
基于 Markdown 的网站源代码