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 生態系統中。