SPA 載入指示器
如果您的網站使用 ssr: false
提供服務,或者您已停用某些頁面的伺服器渲染,您可能會對新的內建 SPA 載入指示器.
特別感興趣。您現在可以在 ~/app/spa-loading-template.html
中放置一個 HTML 檔案,其中包含您希望用於渲染載入螢幕的 HTML,該螢幕將在您的應用程式在這些頁面上完成水合之前渲染。
compatibilityMode: 4
),此路徑現在為 ~/spa-loading-template.html
。👉 預設情況下會渲染一個動畫 Nuxt 圖示。您可以透過在 nuxt 配置檔案中設定 spaLoadingTemplate: false
完全停用此指示器。
⚡️ 效能改進
您的應用程式水合時首先發生的事情是您的外掛執行,因此我們現在對您的外掛執行構建時最佳化,這意味著它們在執行時不需要進行規範化或重新排序。
我們還將您的錯誤元件 JS 包含在您的主入口點中,這意味著如果使用者在沒有連線的情況下發生錯誤,您仍然可以使用 ~/error.vue
處理它。(這還應該減少您的總捆綁包大小。)
👉 與 Nuxt 3.5.3 相比,最小客戶端捆綁包減少了約 0.7KB。讓我們繼續保持下去!
🔥 完全靜態的伺服器元件
在靜態頁面上使用伺服器元件一直都是可行的,但直到現在它們會增加您應用程式的有效負載大小。這種情況不再存在。我們現在將渲染的伺服器元件儲存為單獨的檔案,這些檔案在導航前預載入.
👉 這確實依賴於新的、更豐富的 JSON 有效負載格式,因此請確保您沒有透過將 experimental.renderJsonPayloads
設定為 false 來停用此功能。
🎨 更好的樣式內聯
如果您密切監控您的指標並且沒有關閉 experimental.inlineSSRStyles
,您應該會在頁面中看到更多內聯 CSS,並且外部 CSS 檔案顯著減少。我們現在在全域性 CSS 的去重方面做得更好,特別是由 tailwind 或 unocss 等庫新增的 CSS。
🎬 動畫控制
為了讓您對頁面/佈局元件有更精細的控制,例如使用 GSAP 或其他庫建立自定義過渡,我們現在允許您在<NuxtPage>
上設定 pageRef
等等<NuxtLayout>
上設定 layoutRef
。這些將被傳遞到底層 DOM 元素。
✨ 自動“靜態”預設檢測
到目前為止,執行 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 自動補全,並且不會看到在伺服器路由中不可用的 Vue 自動匯入,例如 useFetch
。
您現在還應該具有執行時 Nitro 鉤子的型別支援.
最後,我們移除了更多物件預設具有 any
型別的位置。這應該會改進 Nuxt 中許多未指定型別回退到 any 的位置的型別安全。
RuntimeConfig
PageMeta
NuxtApp['payload']
(現在可從NuxtPayload
介面訪問)ModuleMeta
您可以在原始 PR 中找到有關如何更新程式碼(如果這影響到您)的更多資訊。
⚗️ 內建 Nitro 2.5
此版本內建了新的 Nitro 2.5,它具有一系列令人興奮的改進值得一看。
值得特別注意的是對流式傳輸的實驗性支援,它也透過 Nuxt 本身的一些更改而啟用。
🛠️ 模組作者的新工具
此版本為模組作者帶來了一些實用程式,可以輕鬆新增型別模板等等以及斷言與另一個模組給定版本的相容性。
此外,此版本最終將解鎖新的 nuxt/module-builder
模式,該模式應該會改進模組作者的型別支援。如果您是模組作者,您可以考慮遵循這些遷移步驟在未來幾天嘗試一下。
✅ 升級
像往常一樣,我們建議您執行以下命令進行升級
npx nuxi upgrade --force
這也將重新整理你的 lockfile,並確保你拉取 Nuxt 依賴的其他依賴項(尤其是在 unjs 生態系統中)的更新。