透過 100 多個技巧的集合來學習 Nuxt!
發布·  

Nuxt 3.6

Nuxt 3.6 已發布,帶來了效能改進、完全靜態伺服器組件、更佳的樣式內聯、靜態預設、更高的類型安全 - 以及更多。

 SPA 載入指示器

如果您的網站以 `ssr: false` 提供服務,或者您在某些頁面上停用了伺服器端渲染,您可能會對新的內建 SPA 載入指示器特別感興趣。

您現在可以將一個 HTML 檔案放在 `~/app/spa-loading-template.html` 中,其中包含一些您想要用來渲染載入畫面的 HTML,該載入畫面將在您的應用程式在這些頁面上完成 hydration 之前渲染。

👉 預設情況下,會渲染一個動畫 Nuxt 圖示。您可以透過在您的 nuxt 設定檔中設定 `spaLoadingTemplate: false` 來完全停用此指示器。

⚡️ 效能改進

當您的應用程式完成 hydration 時,首先發生的事情是您的外掛程式執行,因此我們現在對您的外掛程式執行建置時最佳化,這意味著它們不需要在運行時進行正規化或重新排序。

我們還將您的錯誤組件 JS 包含在您的主要進入點中,這意味著如果使用者在沒有連線的情況下發生錯誤,您仍然可以使用您的 `~/error.vue` 來處理它。(這也應該會減少您的總 bundle 大小。)

👉 與 Nuxt 3.5.3 相比,最小的客戶端 bundle 減少了約 0.7kB。讓我們繼續保持下去!

🔥 完全靜態伺服器組件

在靜態頁面上使用伺服器組件是可能的,但直到現在它們都會增加您應用程式的 payload 大小。現在不再是這樣了。我們現在將渲染的伺服器組件儲存為單獨的檔案,這些檔案會在導航之前預先載入。

👉 這確實依賴於新的、更豐富的 JSON payload 格式,因此請確保您沒有透過將 `experimental.renderJsonPayloads` 設定為 false 來停用它。

🎨 更佳的樣式內聯

如果您密切監控您的指標並且沒有關閉 `experimental.inlineSSRStyles`,您應該會看到更多 CSS 內聯在您的頁面中,以及一個明顯的外部 CSS 檔案。我們現在更擅長於重複資料刪除全域 CSS,特別是由 tailwind 或 unocss 等函式庫添加的 CSS。

🎬 動畫控制

為了讓您對您的頁面/版面配置組件有更精細的控制,例如使用 GSAP 或其他函式庫建立自訂轉場效果,我們現在允許您在 `` 上設定 `pageRef`,以及在 `` 上設定 `layoutRef`。這些將會傳遞到基礎 DOM 元素。

✨ 自動 'static' 預設偵測

到目前為止,在每個部署供應商上執行 `nuxt generate` 都會產生相同的輸出,但隨著 Nuxt 3.6,我們現在自動啟用靜態供應商預設。這意味著如果您將靜態建置(使用 `nuxt generate` 產生)部署到受支援的供應商(目前為 vercel 和 netlify,cloudflare 和 github pages 即將推出),我們將預先渲染您的頁面,並為該供應商提供特殊支援。

這意味著我們可以配置任何不需要伺服器函式的路由規則(重新導向/標頭/等等)。因此,當您部署不需要運行時 SSR 的網站時,您應該可以獲得兩全其美的好處。它還解鎖了在 Vercel 上使用 Nuxt Image 的功能(並且很快就會有更多自動供應商整合的潛力)。

💪 提高類型安全

如果您正在使用我們在 Nuxt 3.5 中發布的新 `~/server/tsconfig.json`,我們現在對伺服器特定的 `#imports` 和擴增功能有更好的支援。因此,當您從伺服器目錄中的 `#imports` 匯入時,您將獲得 Nitro 中正確匯入位置的 IDE 自動完成功能,並且不會看到 Vue 自動匯入,例如在您的伺服器路由中不可用的 `useFetch`。

您現在也應該具有運行時 Nitro hooks 的類型支援。

最後,我們移除了更多物件具有預設 `any` 類型的位置。這應該會在 Nuxt 中提高類型安全性,在許多未指定類型回退到 any 的位置。

  • RuntimeConfig
  • PageMeta
  • NuxtApp['payload'](現在可以從 `NuxtPayload` 介面存取)
  • ModuleMeta

如果這影響到您,您可以在原始 PR 中找到更多關於如何更新您的程式碼的資訊。

⚗️ 內建 Nitro 2.5

此版本隨附新的 Nitro 2.5,其中包含一整列令人興奮的改進,值得查看。

特別值得注意的是串流的實驗性支援,這也由 Nuxt 本身的一些變更啟用。

🛠️ 模組作者的新工具

此版本為模組作者帶來了許多實用工具,可以輕鬆添加類型範本,並斷言與*另一個*模組的給定版本的相容性。

此外,此版本最終將解鎖新的 `nuxt/module-builder` 模式,該模式應改善模組作者的類型支援。如果您是模組作者,您可能會考慮遵循這些遷移步驟,以便在未來幾天內試用它。

✅ 升級

與往常一樣,我們升級的建議是運行

npx nuxi upgrade --force

這也將刷新您的 lockfile,並確保您從 Nuxt 依賴的其他相依性中提取更新,尤其是在 unjs 生態系統中。

📃 完整變更日誌

https://github.com/nuxt/nuxt/releases/tag/v3.6.0 閱讀完整發行說明