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

SPA 加載指示器

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

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

默認(rèn)會(huì)渲染一個(gè) Nuxt 圖標(biāo)動(dòng)畫(huà)。可以通過(guò)在 nuxt 配置文件中設(shè)置spaLoadingTemplate: false來(lái)禁用這個(gè)指示器。

性能優(yōu)化

當(dāng)應(yīng)用渲染時(shí)，首先會(huì)運(yùn)行插件，該版本對(duì)插件進(jìn)行了構(gòu)建時(shí)優(yōu)化，這意味著它們?cè)谶\(yùn)行時(shí)不需要進(jìn)行規(guī)范化或重新排序。

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

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

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

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

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

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

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

動(dòng)畫(huà)控制

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

自動(dòng)檢測(cè)“static”預(yù)設(shè)

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

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

增強(qiáng)的類(lèi)型安全性

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

現(xiàn)在，還可以為運(yùn)行時(shí) Nitro 鉤子提供類(lèi)型支持。

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

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

Nitro 2.5

這個(gè)版本配備了全新的 Nitro 2.5，該版本提供了流式傳輸?shù)膶?shí)驗(yàn)性支持，這也由 Nuxt 本身的一些變化啟用。

模塊作者的新工具

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

升級(jí)

建議運(yùn)行以下命令進(jìn)行升級(jí)：

nuxi upgrade --force

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

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