Nuxt 3.6 正式發布!
6 月 23 日,Nuxt 3.6 正式發布,該版本帶來了性能優化、完全靜態的服務端組件、更好的樣式內聯、靜態預設、增強的類型安全等許多功能改進。
SPA 加載指示器
如果網站使用ssr: false提供服務,或者在某些頁面上禁用了服務端渲染,那么可能會用到新的內置 SPA 加載指示器。
現在可以在 ~/app/spa-loading-template.html 中放一個 HTML 文件,其中包含用于渲染加載屏幕的 HTML 內容,在這些頁面上,加載屏幕將一直顯示,直到應用完成渲染。
默認會渲染一個 Nuxt 圖標動畫。可以通過在 nuxt 配置文件中設置spaLoadingTemplate: false來禁用這個指示器。
性能優化
當應用渲染時,首先會運行插件,該版本對插件進行了構建時優化,這意味著它們在運行時不需要進行規范化或重新排序。
除此之外,還將錯誤組件的 JavaScript 包含在主入口文件中,這意味著如果用戶在沒有連接的情況下發生錯誤,仍然可以通過 ~/error.vue 處理它(這也會減少整體包大小)。
與 Nuxt 3.5.3 相比,最小的客戶端包減少了約 0.7 KB。
完全靜態的服務器組件
在靜態頁面上使用服務端組件是可行的,但是會增加應用的載荷大小。新版本將渲染的服務端組件存儲為單獨的文件,在導航之前進行預加載。
這依賴于新的、更豐富的 JSON 載荷格式,所以請確保沒有將 experimental.renderJsonPayloads 設置為 false 來禁用它。
更好的樣式內聯
如果密切監控指標,并且沒有關閉 experimental.inlineSSRStyles,應該能看到更多的 CSS 內聯到頁面中,并且外部 CSS 文件顯著減少。新版本更擅長去重全局 CSS,特別是由類似 tailwind 或 unocss 等庫添加的 CSS。
動畫控制
為了可以對頁面/布局組件有更精細的控制,例如使用GSAP 或其他庫創建自定義過渡效果,現在允許在<NuxtPage>上設置pageRef,在<NuxtLayout>上設置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 自動完成,并且不會看到諸如 useFetch 等不可用于服務端路由的 Vue 自動導入。
現在,還可以為運行時 Nitro 鉤子提供類型支持。
最后,該版本還刪除了更多對象具有默認 any 類型的位置。這應該可以提高 Nuxt 中許多位置的類型安全性,其中未指定的類型會回退到 any:
- RuntimeConfig
- PageMeta
- NuxtApp['payload']
- ModuleMeta
Nitro 2.5
這個版本配備了全新的 Nitro 2.5,該版本提供了流式傳輸的實驗性支持,這也由 Nuxt 本身的一些變化啟用。
模塊作者的新工具
這個版本為模塊作者提供了一些實用工具,以便輕松地添加類型模板并斷言與另一個模塊的特定版本的兼容性。此外,這個版本將最終解鎖一個新的 nuxt/module-builder模式,可以提高模塊作者的類型支持。
升級
建議運行以下命令進行升級:
nuxi upgrade --force
這將刷新 lock 文件,并確保從 Nuxt 依賴的其他依賴項中獲取更新,特別是在 unjs 生態系統中。
Release Note:https://nuxt.com/blog/v3-6。