SPA 加載指示器
如果您的網站使用 ssr: false
服務,或者您已在某些頁面上停用了伺服器端渲染,您可能會對新的內建 SPA 加載指示器特別感興趣。
您現在可以將一個 HTML 檔案放置在 ~/app/spa-loading-template.html
中,其中包含您想要用來呈現加載畫面的 HTML,該畫面將會呈現直到您的應用程式在這些頁面上完成水合。
👉 預設情況下,會呈現一個動畫的 Nuxt 圖示。您可以在您的 nuxt 配置檔案中設定 spaLoadingTemplate: false
來完全停用此指示器。
⚡️ 效能改進
當您的應用程式完成水合時,首先發生的事情是執行您的外掛程式,因此我們現在對您的外掛程式執行 建置時最佳化,這表示它們不需要在執行時進行正規化或重新排序。
我們也會將您的錯誤組件 JS 包含在您的主要進入點中,這表示如果使用者在沒有連線的情況下發生錯誤,您仍然可以使用您的 ~/error.vue
來處理它。(這也應該會減少您的總套件大小。)
👉 與 Nuxt 3.5.3 相比,最小的客戶端套件減少了約 0.7kB。讓我們繼續保持下去!
🔥 完全靜態伺服器組件
在靜態頁面上使用伺服器組件是可能的,但直到現在它們都會增加您應用程式的有效負載大小。現在不再是這樣了。我們現在將 渲染的伺服器組件儲存為單獨的檔案,這些檔案會在導覽之前預先載入。
👉 這確實依賴於新的、更豐富的 JSON 有效負載格式,因此請確保您沒有透過將 experimental.renderJsonPayloads
設定為 false 來停用此功能。
🎨 更好的樣式內聯
如果您密切監控您的指標並且沒有關閉 experimental.inlineSSRStyles
,您應該會在您的頁面中看到更多的 CSS 內聯,並且外部 CSS 檔案會明顯減少。我們現在更擅長去重複全域 CSS,特別是像是 tailwind 或 unocss 等程式庫新增的。
🎬 動畫控制
為了讓您更精細地控制您的頁面/佈局組件,例如使用 GSAP 或其他程式庫建立自訂轉場效果,我們現在允許您在 <NuxtPage>
上設定 pageRef
和在 <NuxtLayout>
上設定 layoutRef
。這些將會傳遞到基礎的 DOM 元素。
✨ 自動偵測「靜態」預設
到目前為止,執行 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 自動完成功能,並且不會看到像 useFetch
這樣在您的伺服器路由中不可用的 Vue 自動導入。
您現在也應該有 執行階段 Nitro 掛鉤的類型支援。
最後,我們移除了更多物件具有預設 any
類型的位置。這應該會在許多未指定類型退回到 any 的 Nuxt 內提高類型安全性
RuntimeConfig
PageMeta
NuxtApp['payload']
(現在可從NuxtPayload
介面存取)ModuleMeta
如果這影響到您,您可以在原始 PR 中找到更多關於如何更新您的程式碼的資訊。
⚗️ 內建 Nitro 2.5
此版本隨附新的 Nitro 2.5,其中包含一長串令人興奮的改進,值得一看。
特別值得注意的是對串流的實驗性支援,這也可以透過 Nuxt 本身中的一些變更來啟用。
🛠️ 模組作者的新工具
此版本為模組作者帶來了許多實用工具,可以輕鬆地新增類型範本和斷言與給定版本的另一個模組的相容性。
此外,此版本最終將解鎖新的 nuxt/module-builder
模式,該模式應改善模組作者的類型支援。如果您是模組作者,您可以考慮遵循這些遷移步驟,以便在未來幾天內試用它。
✅ 升級
如同往常,我們建議的升級方式是執行
npx nuxi upgrade --force
這也會刷新您的鎖定檔案,並確保您從 Nuxt 依賴的其他依賴項(特別是在 unjs 生態系統中)提取更新。
📃 完整變更日誌
閱讀 https://github.com/nuxt/nuxt/releases/tag/v3.6.0 上的完整版本說明