6 月 23 日，Nuxt 3.6 正式發(fā)布，該版本帶來了性能優(yōu)化、完全靜態(tài)的服務(wù)端組件、更好的樣式內(nèi)聯(lián)、靜態(tài)預(yù)設(shè)、增強的類型安全等許多功能改進。

SPA 加載指示器

如果網(wǎng)站使用ssr: false提供服務(wù)，或者在某些頁面上禁用了服務(wù)端渲染，那么可能會用到新的內(nèi)置 SPA 加載指示器。

現(xiàn)在可以在 ~/app/spa-loading-template.html 中放一個 HTML 文件，其中包含用于渲染加載屏幕的 HTML 內(nèi)容，在這些頁面上，加載屏幕將一直顯示，直到應(yīng)用完成渲染。

默認(rèn)會渲染一個 Nuxt 圖標(biāo)動畫?？梢酝ㄟ^在 nuxt 配置文件中設(shè)置spaLoadingTemplate: false來禁用這個指示器。

性能優(yōu)化

當(dāng)應(yīng)用渲染時，首先會運行插件，該版本對插件進行了構(gòu)建時優(yōu)化，這意味著它們在運行時不需要進行規(guī)范化或重新排序。

除此之外，還將錯誤組件的 JavaScript 包含在主入口文件中，這意味著如果用戶在沒有連接的情況下發(fā)生錯誤，仍然可以通過 ~/error.vue 處理它（這也會減少整體包大小）。

與 Nuxt 3.5.3 相比，最小的客戶端包減少了約 0.7 KB。

完全靜態(tài)的服務(wù)器組件

在靜態(tài)頁面上使用服務(wù)端組件是可行的，但是會增加應(yīng)用的載荷大小。新版本將渲染的服務(wù)端組件存儲為單獨的文件，在導(dǎo)航之前進行預(yù)加載。

這依賴于新的、更豐富的 JSON 載荷格式，所以請確保沒有將 experimental.renderJsonPayloads 設(shè)置為 false 來禁用它。

更好的樣式內(nèi)聯(lián)

如果密切監(jiān)控指標(biāo)，并且沒有關(guān)閉 experimental.inlineSSRStyles，應(yīng)該能看到更多的 CSS 內(nèi)聯(lián)到頁面中，并且外部 CSS 文件顯著減少。新版本更擅長去重全局 CSS，特別是由類似 tailwind 或 unocss 等庫添加的 CSS。

動畫控制

為了可以對頁面/布局組件有更精細(xì)的控制，例如使用GSAP 或其他庫創(chuàng)建自定義過渡效果，現(xiàn)在允許在<NuxtPage>上設(shè)置pageRef，在<NuxtLayout>上設(shè)置layoutRef。這些將被傳遞到底層的 DOM 元素中。

自動檢測“static”預(yù)設(shè)

到目前為止，運行 nuxt generate 在每個部署提供者上產(chǎn)生相同的輸出結(jié)果，但是在 Nuxt 3.6 中，自動啟用了靜態(tài)提供者預(yù)設(shè)。這意味著如果將靜態(tài)構(gòu)建（通過 nuxt generate 生成）部署到受支持的提供者（目前是 Vercel 和 Netlify，很快還將支持 Cloudflare 和 GitHub Pages），將使用該提供者的特殊支持對頁面進行預(yù)渲染。

這意味著可以配置任何不需要服務(wù)端函數(shù)的路由規(guī)則。因此，在部署不需要運行時 SSR 的站點時，可以獲得最佳效果。它還解鎖了在 Vercel 上使用 Nuxt Image 的功能。

增強的類型安全性

如果在 Nuxt 3.5 中使用新的 ~/server/tsconfig.json，現(xiàn)在對服務(wù)端特定的 #imports 和擴展提供更好的支持。因此，當(dāng)從服務(wù)端目錄中的 #imports 導(dǎo)入時，在 Nitro 中將獲得正確的導(dǎo)入位置的 IDE 自動完成，并且不會看到諸如 useFetch 等不可用于服務(wù)端路由的 Vue 自動導(dǎo)入。

現(xiàn)在，還可以為運行時 Nitro 鉤子提供類型支持。

最后，該版本還刪除了更多對象具有默認(rèn) any 類型的位置。這應(yīng)該可以提高 Nuxt 中許多位置的類型安全性，其中未指定的類型會回退到 any：

• RuntimeConfig
• PageMeta
• NuxtApp['payload']
• ModuleMeta

Nitro 2.5

這個版本配備了全新的 Nitro 2.5，該版本提供了流式傳輸?shù)膶嶒炐灾С?，這也由 Nuxt 本身的一些變化啟用。

模塊作者的新工具

這個版本為模塊作者提供了一些實用工具，以便輕松地添加類型模板并斷言與另一個模塊的特定版本的兼容性。此外，這個版本將最終解鎖一個新的 nuxt/module-builder模式，可以提高模塊作者的類型支持。

升級

建議運行以下命令進行升級：

nuxi upgrade --force

這將刷新 lock 文件，并確保從 Nuxt 依賴的其他依賴項中獲取更新，特別是在 unjs 生態(tài)系統(tǒng)中。

Release Note：https://nuxt.com/blog/v3-6。