Nuxt 3.6 正式發布！你發現了什么？全球報道

發布時間：2023-06-26 10:36:06

來源：清一色財經

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

(資料圖片僅供參考)

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 或其他庫創建自定義過渡效果，現在允許在上設置pageRef，在上設置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：

RuntimeConfigPageMetaNuxtApp[‘payload’]ModuleMeta