Nuxt 3.6 正式發(fā)布！你發(fā)現(xiàn)了什么？全球報(bào)道

發(fā)布時(shí)間：2023-06-26 10:36:06

來源：清一色財(cái)經(jīng)

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

(資料圖片僅供參考)

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

SPA 加載指示器

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

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

默認(rèn)會(huì)渲染一個(gè) Nuxt 圖標(biāo)動(dòng)畫?？梢酝ㄟ^在 nuxt 配置文件中設(shè)置spaLoadingTemplate: false來禁用這個(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 包含在主入口文件中，這意味著如果用戶在沒有連接的情況下發(fā)生錯(cuò)誤，仍然可以通過~/error.vue處理它（這也會(huì)減少整體包大?。?。

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

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

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

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

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

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

動(dòng)畫控制

為了可以對(duì)頁面/布局組件有更精細(xì)的控制，例如使用GSAP 或其他庫創(chuàng)建自定義過渡效果，現(xiàn)在允許在上設(shè)置pageRef，在上設(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)建（通過nuxt generate生成）部署到受支持的提供者（目前是 Vercel 和 Netlify，很快還將支持 Cloudflare 和 GitHub Pages），將使用該提供者的特殊支持對(duì)頁面進(jìn)行預(yù)渲染。

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

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

如果在 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 鉤子提供類型支持。

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

RuntimeConfigPageMetaNuxtApp[‘payload’]ModuleMeta