这是我们的一个新系列，好文翻译，会翻译一些看到的技术、趋势类文章，欢迎大家一起来交流，讨论。

基于Gatsby之前已有的功能，Gatsby 5拥有更尖端的技术去增强您的网站。在过去的一年里，或者说以往的每一年，我们一直痴迷于构建和性能这两点。我们最近在Gatsby 最热门的帖子中回顾了过去七个季度中最具影响力的重大变化，当我们进入 2022 年的最后阶段时，我们并没有放慢脚步。在这篇文章中，我们将提供为Gatsby 5 准备的所有令人印象深刻的功能的高级概述。如果您想更深入地了解详细信息，请查看我们的Gatsby 5 发行说明https://www.gatsbyjs.com/docs/reference/release-notes/v5.0/

👀 想立即开始吗？这是 Gatsby 4 到 Gatsby 5 迁移指南！ https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/

我们的工程副总裁 Dustin Schau 喜欢说“ Make it Work. Make it Right. Make it Fast. ” ，Gatsby 5 就是这样做的，但我们最引以为豪的是对于 “ Make it Fast ” 的改进。使用 Slices 快速构建，并通过一系列的创新技术，例如Partial Hydration、Script Component 等，以达成快速运行的成果。在这篇文章中，我们将深入探讨其中的一些, 以便您可以继续确信您正在 Gatsby 中为headless 环境选择最快的前端工具。

说了这些，让我们看看Gatsby 5有什么新内容！ 👇👇👇

视频参考资料：https://youtu.be/6RwfzZi5gn0

Slice API

在 Gatsby 5 中，Gatsby 通过引入 Slice API 提高了增量构建和增量部署的速度。Slices允许开发者在站点中定义高度贡献的组件，然后通知Gatsby仅构建一次这些公共组件。当构建完成后，我们将生成的标记和 JavaScript代码片段拼接到包含该公共组件的页面。这意味着对公共组件（如导航、横幅、页眉和页脚）的更新不再需要重新渲染使用该组件的所有页面。由于 Slice API支持传递 props（包括子项），因此即使是layout组件 或者 wrapper 类的组件也可以制作出色的 Slice。这些组件更新后的构建时间会比以前快 90%。    

Gatsby Cloud还优化了企业计划，可以显著加快Slice的构建速度。我们在对一个由Contentful支持的10000页网站的测试中证明了Slices有很大的优势，我们这里的数据只是测量Gatsby Cloud以显示Slices的影响，因为其他云解决方案超过二十分钟，并且在视觉上将影响降至最低，而通过Gatsby Cloud公共头部组件的构建时长缩短了整整两分钟。

“ 对于我们这种规模的网站，更新Footer 或Banner 等微小更改会导致我们网站的完全重建，但通过Gatsby 5中的Slices API 可以加快增量构建的速度，我们希望每周都能节省数小时等待构建的时间。” —— Nikan Shahidi，Webstacks CEO

👉 Slice API相关博客文章  https://www.gatsbyjs.com/blog/gatsby-slice-api/

👉 Slice API文档（原文）  https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-slice/

👉 Slice API操作指南（原文） https://www.gatsbyjs.com/docs/how-to/performance/using-slices/

视频参考资料： 【😎需科学上网】 https://youtu.be/yL1i-_T8w9c

Partial Hydration (Beta版本)

传统的基于 React 的网站必须等待所有组件的所有JavaScript 都可用，页面元素才能成为交互式元素。当利用 Gatsby 5 的 Partial Hydration 时，开发人员能够只为页面上的组件提供和hydrate必要的 JavaScript，从而在使用 React 时能获得最快的访问体验，并通过 Google Web Vitals 获得最高分。    Partial Hydration 建立在React 的服务器组件之上。服务器组件不在 React 的完整版本中，在此之前，部分Partial Hydration将作为 Gatsby 中的测试版本发布。  

“ 在 React 页面上为每个组件hydrate总是觉得没有必要。Gatsby使得 只把Javascript发送到实际需要它的组件这件事变得简单。这对我们的开发者来说很容易，对我们的用户来说也很棒。 ” —— Justin Smith，英特乐开发者

👉 Partial Hydration相关博客文章  https://www.gatsbyjs.com/blog/partial-hydration-beta-explained/

👉 Partial Hydration API 文档  https://www.gatsbyjs.com/docs/conceptual/partial-hydration/

👉 Partial Hydration 操作指南  https://www.gatsbyjs.com/docs/how-to/performance/partial-hydration/

Script Component

以高性能方式向网站添加脚本一直是一个挑战。默认情况下，浏览器中的脚本执行是阻塞的，我们作为开发者需要在我们的网页中实现许多有用的脚本，且不会降低最终的用户体验。

在 Gatsby 5 中，可以使用内置的脚本组件来帮助高性能地加载脚本。脚本组件提供了一种声明不同加载策略的便捷方法，以及一种默认加载策略，可为 Gatsby 用户提供开箱即用的强大性能。无论您是想将管理脚本的繁重工作留给 Gatsby，还是想要最大的灵活性和控制力，Gatsby脚本组件都是完成这项工作的绝佳工具。

👉 Script Component相关博客文章  https://www.gatsbyjs.com/blog/using-gatsby-script-component-to-decrease-page-load-times/

👉 Script Component API 文档  https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/

👉 Script Component 操作指南  https://www.gatsbyjs.com/docs/how-to/performance/improving-site-performance/#step-2-use-the-gatsby-script-component-to-load-scripts-performantly

视频参考资料： 【😎需科学上网】https://youtu.be/ioBiW1_g-cg

Head API

为了确保目标用户找到网站，搜索引擎会检查网站中的特定元数据，如标题、描述和关键字。从历史经验来看，Gatsby开发者会依靠第三方库（如react-helmet）来完成。现在Gatsby为大多数元素例如Images或Scripts等内容提供了开发者喜欢的内置解决方案。Gatsby 5 还包含Head API，也可以为 SEO 提供原生支持。

👉 Head API 博客文章  https://www.gatsbyjs.com/blog/introducing-the-gatsby-head-api/

👉 Head API 文档  https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/

👉 Head API 操作指南  https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/

GraphiQL v2

GraphiQL 是 GraphQL集成开发环境 （IDE）。这是一个功能强大且非常棒的工具，在构建 Gatsby 网站时会经常使用。运行gatsby development 时，可以使用 GraphiQL 运行查询、获取代码示例以及通过转到localhost：8000/___graphql 来预览数据。GraphiQL 今年早些时候发布了一个主要版本，Gatsby 默认附带 GraphiQL v2。借助友好的 UI、查询选项卡、暗模式和特定于 Gatsby 的代码示例，开发人员可以以全新的方式使用 Gatsby 的数据层。

👉 Gatsby数据层文档  https://www.gatsbyjs.com/docs/reference/graphql-data-layer/

👉 GraphiQL 操作指南  https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/

增量构建和部署

速度对于在框架中保持高效率开发和内容编辑器体验至关重要。新 Slice API 的基石是两项令人惊叹的加速技术：增量构建和增量部署。通过确切地知道网站中更改了哪些内容，Gatsby 可以只构建更改的内容以节省您的时间。构建完成后，我们也只部署更改的内容。我们已经看到这些构建时间分别节省了 1000 倍和 10 倍。我们非常有信心这些变化对团队及其工作流程是极其重要的，我们甚至觉得这些变化将Gatsby带入了一个新的开发类别，即Reactive Site Generation，简称RSG。

视频参考资料： 【点我查看,😎需科学上网】 https://youtu.be/lr3s2v51nPc

👉 增量构建及增量部署相关博客文章  https://www.gatsbyjs.com/blog/what-are-incremental-cloud-builds-on-gatsby/

👉 Kyle Mathew - RSG 三部曲 - 第一部分  https://www.gatsbyjs.com/blog/re-introducing-gatsby-a-reactive-site-generator/

👉 Kyle Mathew - RSG 三部曲 - 第二部分  https://www.gatsbyjs.com/blog/scaling-rsg-builds-with-gatsbys-data-layer/

👉 Kyle Mathew - RSG 三部曲 - 第三部分  https://www.gatsbyjs.com/blog/how-were-scaling-gatsby-to-millions-of-pages/

开始动手吧

Gatsby4 到Gatsby5 是我们迄今为止最简单的重大升级。虽然我们已经回顾了此版本的高级功能，但如果您需要更详细的列表，请查看我们的Gatsby 5 发行说明（https://www.gatsbyjs.com/docs/reference/release-notes/v5.0/）。

若要开始，请参阅我们的 v4 到 v5 迁移指南（https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/）。另外，请查看Paul Scanlon最近的博客文章《对YOLO说不》（https://www.gatsbyjs.com/blog/gatsby-5-upgrade-say-no-to-yolo/）。

社区贡献

感谢我们美好的社区对我们和彼此的支持。如果你写过博客，录制过播客，或者导演过关于 Gatsby5 新功能的视频制作，请在Twitter（@0xJ05H）上与我联系，并提供指向您的报道的链接，我会将其添加到这些资源列表中！

📖   Gatsby 5: The Fastest Gatsby Yet  查看原文 （https://link.juejin.cn/?target=https%3A%2F%2Fwww.gatsbyjs.com%2Fblog%2Fgatsby-5%2F）

最后

如果你对这些WEB前沿技术也有兴趣，欢迎你对我们的文章一键三联，以及关注我们接下来的开源项目————OpenTiny。欢迎微信搜索我们的小助手: opentiny-official，拉你进群，了解它最新的动态。