這是我們的一個新系列，好文翻譯，會翻譯一些看到的技術(shù)、趨勢類文章，歡迎大家一起來交流，討論。

基于Gatsby之前已有的功能，Gatsby 5擁有更尖端的技術(shù)去增強您的網(wǎng)站。在過去的一年里，或者說以往的每一年，我們一直癡迷于構(gòu)建和性能這兩點。我們最近在Gatsby 最熱門的帖子中回顧了過去七個季度中最具影響力的重大變化，當(dāng)我們進入 2022 年的最后階段時，我們并沒有放慢腳步。在這篇文章中，我們將提供為Gatsby 5 準(zhǔn)備的所有令人印象深刻的功能的高級概述。如果您想更深入地了解詳細信息，請查看我們的Gatsby 5 發(fā)行說明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 快速構(gòu)建，并通過一系列的創(chuàng)新技術(shù)，例如Partial Hydration、Script Component 等，以達成快速運行的成果。在這篇文章中，我們將深入探討其中的一些, 以便您可以繼續(xù)確信您正在 Gatsby 中為headless 環(huán)境選擇最快的前端工具。

說了這些，讓我們看看Gatsby 5有什么新內(nèi)容！ ??????

視頻參考資料：https://youtu.be/6RwfzZi5gn0

Slice API

在 Gatsby 5 中，Gatsby 通過引入 Slice API 提高了增量構(gòu)建和增量部署的速度。Slices允許開發(fā)者在站點中定義高度貢獻的組件，然后通知Gatsby僅構(gòu)建一次這些公共組件。當(dāng)構(gòu)建完成后，我們將生成的標(biāo)記和 JavaScript代碼片段拼接到包含該公共組件的頁面。這意味著對公共組件（如導(dǎo)航、橫幅、頁眉和頁腳）的更新不再需要重新渲染使用該組件的所有頁面。由于 Slice API支持傳遞 props（包括子項），因此即使是layout組件 或者 wrapper 類的組件也可以制作出色的 Slice。這些組件更新后的構(gòu)建時間會比以前快 90%。 ? ?

Gatsby Cloud還優(yōu)化了企業(yè)計劃，可以顯著加快Slice的構(gòu)建速度。我們在對一個由Contentful支持的10000頁網(wǎng)站的測試中證明了Slices有很大的優(yōu)勢，我們這里的數(shù)據(jù)只是測量Gatsby Cloud以顯示Slices的影響，因為其他云解決方案超過二十分鐘，并且在視覺上將影響降至最低，而通過Gatsby Cloud公共頭部組件的構(gòu)建時長縮短了整整兩分鐘。

“ 對于我們這種規(guī)模的網(wǎng)站，更新Footer 或Banner 等微小更改會導(dǎo)致我們網(wǎng)站的完全重建，但通過Gatsby 5中的Slices API 可以加快增量構(gòu)建的速度，我們希望每周都能節(jié)省數(shù)小時等待構(gòu)建的時間?！?—— Nikan Shahidi，Webstacks CEO

?? Slice API相關(guān)博客文章??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/

視頻參考資料： 【??需科學(xué)上網(wǎng)】?https://youtu.be/yL1i-_T8w9c

Partial Hydration (Beta版本)

傳統(tǒng)的基于 React 的網(wǎng)站必須等待所有組件的所有JavaScript 都可用，頁面元素才能成為交互式元素。當(dāng)利用 Gatsby 5 的 Partial Hydration 時，開發(fā)人員能夠只為頁面上的組件提供和hydrate必要的 JavaScript，從而在使用 React 時能獲得最快的訪問體驗，并通過 Google Web Vitals 獲得最高分。 ? ?Partial Hydration 建立在React 的服務(wù)器組件之上。服務(wù)器組件不在 React 的完整版本中，在此之前，部分Partial Hydration將作為 Gatsby 中的測試版本發(fā)布。 ?

“ 在 React 頁面上為每個組件hydrate總是覺得沒有必要。Gatsby使得 只把Javascript發(fā)送到實際需要它的組件這件事變得簡單。這對我們的開發(fā)者來說很容易，對我們的用戶來說也很棒。 ” —— Justin Smith，英特樂開發(fā)者

?? Partial Hydration相關(guān)博客文章??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

以高性能方式向網(wǎng)站添加腳本一直是一個挑戰(zhàn)。默認情況下，瀏覽器中的腳本執(zhí)行是阻塞的，我們作為開發(fā)者需要在我們的網(wǎng)頁中實現(xiàn)許多有用的腳本，且不會降低最終的用戶體驗。

在 Gatsby 5 中，可以使用內(nèi)置的腳本組件來幫助高性能地加載腳本。腳本組件提供了一種聲明不同加載策略的便捷方法，以及一種默認加載策略，可為 Gatsby 用戶提供開箱即用的強大性能。無論您是想將管理腳本的繁重工作留給 Gatsby，還是想要最大的靈活性和控制力，Gatsby腳本組件都是完成這項工作的絕佳工具。

?? Script Component相關(guān)博客文章??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

視頻參考資料： 【??需科學(xué)上網(wǎng)】https://youtu.be/ioBiW1_g-cg

Head API

為了確保目標(biāo)用戶找到網(wǎng)站，搜索引擎會檢查網(wǎng)站中的特定元數(shù)據(jù)，如標(biāo)題、描述和關(guān)鍵字。從歷史經(jīng)驗來看，Gatsby開發(fā)者會依靠第三方庫（如react-helmet）來完成?，F(xiàn)在Gatsby為大多數(shù)元素例如Images或Scripts等內(nèi)容提供了開發(fā)者喜歡的內(nèi)置解決方案。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集成開發(fā)環(huán)境 （IDE）。這是一個功能強大且非常棒的工具，在構(gòu)建 Gatsby 網(wǎng)站時會經(jīng)常使用。運行g(shù)atsby development 時，可以使用 GraphiQL 運行查詢、獲取代碼示例以及通過轉(zhuǎn)到localhost：8000/___graphql 來預(yù)覽數(shù)據(jù)。GraphiQL 今年早些時候發(fā)布了一個主要版本，Gatsby 默認附帶 GraphiQL v2。借助友好的 UI、查詢選項卡、暗模式和特定于 Gatsby 的代碼示例，開發(fā)人員可以以全新的方式使用 Gatsby 的數(shù)據(jù)層。

?? Gatsby數(shù)據(jù)層文檔??https://www.gatsbyjs.com/docs/reference/graphql-data-layer/

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

增量構(gòu)建和部署

速度對于在框架中保持高效率開發(fā)和內(nèi)容編輯器體驗至關(guān)重要。新 Slice API 的基石是兩項令人驚嘆的加速技術(shù)：增量構(gòu)建和增量部署。通過確切地知道網(wǎng)站中更改了哪些內(nèi)容，Gatsby 可以只構(gòu)建更改的內(nèi)容以節(jié)省您的時間。構(gòu)建完成后，我們也只部署更改的內(nèi)容。我們已經(jīng)看到這些構(gòu)建時間分別節(jié)省了 1000 倍和 10 倍。我們非常有信心這些變化對團隊及其工作流程是極其重要的，我們甚至覺得這些變化將Gatsby帶入了一個新的開發(fā)類別，即Reactive Site Generation，簡稱RSG。

視頻參考資料： 【點我查看,??需科學(xué)上網(wǎng)】?https://youtu.be/lr3s2v51nPc

?? 增量構(gòu)建及增量部署相關(guān)博客文章??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 是我們迄今為止最簡單的重大升級。雖然我們已經(jīng)回顧了此版本的高級功能，但如果您需要更詳細的列表，請查看我們的Gatsby 5 發(fā)行說明（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/）。

社區(qū)貢獻

感謝我們美好的社區(qū)對我們和彼此的支持。如果你寫過博客，錄制過播客，或者導(dǎo)演過關(guān)于 Gatsby5 新功能的視頻制作，請在Twitter（@0xJ05H）上與我聯(lián)系，并提供指向您的報道的鏈接，我會將其添加到這些資源列表中！

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

最后

如果你對這些WEB前沿技術(shù)也有興趣，歡迎你對我們的文章一鍵三聯(lián)，以及關(guān)注我們接下來的開源項目————OpenTiny。歡迎微信搜索我們的小助手:?opentiny-official，拉你進群，了解它最新的動態(tài)。