这是我们的一个新系列,好文翻译,会翻译一些看到的技术、趋势类文章,欢迎大家一起来交流,讨论。
基于Gatsby之前已有的功能,Gatsby 5拥有更尖端的技术去增强您的网站。在过去的一年里,或者说以往的每一年,我们一直痴迷于构建和性能这两点。我们最近在Gatsby 最热门的帖子中回顾了过去七个季度中最具影响力的重大变化,当我们进入 2022 年的最后阶段时,我们并没有放慢脚步。在这篇文章中,我们将提供为Gatsby 5 准备的所有令人印象深刻的功能的高级概述。如果您想更深入地了解详细信息,请查看我们的Gatsby 5 发行说明。
👀 想立即开始吗?这是 Gatsby 4 到 Gatsby 5 迁移指南!
我们的工程副总裁 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有什么新内容! 👇👇👇
视频参考资料: 【点我查看,😎需科学上网】
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
视频参考资料: 【点我查看,😎需科学上网】
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,英特乐开发者
Script Component
以高性能方式向网站添加脚本一直是一个挑战。默认情况下,浏览器中的脚本执行是阻塞的,我们作为开发者需要在我们的网页中实现许多有用的脚本,且不会降低最终的用户体验。
在 Gatsby 5 中,可以使用内置的脚本组件来帮助高性能地加载脚本。脚本组件提供了一种声明不同加载策略的便捷方法,以及一种默认加载策略,可为 Gatsby 用户提供开箱即用的强大性能。无论您是想将管理脚本的繁重工作留给 Gatsby,还是想要最大的灵活性和控制力,Gatsby脚本组件都是完成这项工作的绝佳工具。
视频参考资料: 【点我查看,😎需科学上网】
Head API
为了确保目标用户找到网站,搜索引擎会检查网站中的特定元数据,如标题、描述和关键字。从历史经验来看,Gatsby开发者会依靠第三方库(如react-helmet)来完成。现在Gatsby为大多数元素例如Images或Scripts等内容提供了开发者喜欢的内置解决方案。Gatsby 5 还包含Head API,也可以为 SEO 提供原生支持。
GraphiQL v2
GraphiQL 是 GraphQL集成开发环境 (IDE)。这是一个功能强大且非常棒的工具,在构建 Gatsby 网站时会经常使用。运行gatsby development 时,可以使用 GraphiQL 运行查询、获取代码示例以及通过转到localhost:8000/___graphql 来预览数据。GraphiQL 今年早些时候发布了一个主要版本,Gatsby 默认附带 GraphiQL v2。借助友好的 UI、查询选项卡、暗模式和特定于 Gatsby 的代码示例,开发人员可以以全新的方式使用 Gatsby 的数据层。
增量构建和部署
速度对于在框架中保持高效率开发和内容编辑器体验至关重要。新 Slice API 的基石是两项令人惊叹的加速技术:增量构建和增量部署。通过确切地知道网站中更改了哪些内容,Gatsby 可以只构建更改的内容以节省您的时间。构建完成后,我们也只部署更改的内容。我们已经看到这些构建时间分别节省了 1000 倍和 10 倍。我们非常有信心这些变化对团队及其工作流程是极其重要的,我们甚至觉得这些变化将Gatsby带入了一个新的开发类别,即Reactive Site Generation,简称RSG。
视频参考资料: 【点我查看,😎需科学上网】
👉 Kyle Mathew - RSG 三部曲 - 第一部分
👉 Kyle Mathew - RSG 三部曲 - 第二部分
👉 Kyle Mathew - RSG 三部曲 - 第三部分
开始动手吧
Gatsby4 到Gatsby5 是我们迄今为止最简单的重大升级。虽然我们已经回顾了此版本的高级功能,但如果您需要更详细的列表,请查看我们的Gatsby 5 发行说明。
若要开始,请参阅我们的 v4 到 v5 迁移指南。另外,请查看Paul Scanlon最近的博客文章《对YOLO说不》。
社区贡献 感谢我们美好的社区对我们和彼此的支持。如果你写过博客,录制过播客,或者导演过关于 Gatsby5 新功能的视频制作,请在Twitter(@0xJ05H)上与我联系,并提供指向您的报道的链接,我会将其添加到这些资源列表中!
最后
如果你对这些WEB前沿技术也有兴趣,欢迎你对我们的文章一键三联,以及关注我们接下来的开源项目————OpenTiny。欢迎微信搜索我们的小助手: opentiny-official
,拉你进群,了解它最新的动态。