釋出·  

Nuxt 3.3

3.3.0 是一個次要(功能)版本,帶來了許多效能和開發體驗改進、錯誤修復以及新功能。
Daniel Roe

Daniel Roe

@danielroe.dev

✨ 本地模組開發體驗

我們進行了一系列更改,以啟用本地模組並改善開發體驗。

我們現在會自動掃描您的 ~/modules 資料夾,並將其中的頂級檔案註冊為專案中的模組(#19394).

當這些檔案發生變化時,我們會自動重啟 Nuxt 伺服器。

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
-   '~/modules/purge-comments'
  ]
})

我們現在還暴露了 nuxt/kit,以便在您的本地專案中輕鬆訪問 Kit 可組合項,而無需安裝 @nuxt/kit (#19422).

閱讀有關本地模組的文件.

♻️ 重啟 Nuxt

您可以將檔案新增到 watch 陣列中,以自動重啟伺服器(#19530)。這對於模組作者來說可能特別有用。您還可以使用新的 restart 鉤子觸發 Nuxt 伺服器的重啟(#19084).

🔥 效能改進

作為最佳實踐,我們將靜態資源的 maxAge 增加到 1 年(#19335),並支援對更多構建內容進行 tree-shaking (#19508).

我們現在還支援透過物件語法預載入帶有路由的 <NuxtLink> (#19120):

<NuxtLink :to="{ name: 'home', query: { year: '2023' } }">Home</NuxtLink>

我們還會跟蹤您使用的每個模組執行設定所需的時間,如果時間過長則發出警告。您可以透過執行帶有 DEBUG=1 的開發伺服器來檢視所有這些值 (#18648).

DEBUG=1 npx nuxt dev
 Module pages took 1.5ms to setup.
 Module meta took 3.15ms to setup
 Module components took 4.5ms to setup.
...

您還可以選擇透過配置可組合項在特定環境中進行 treeshaking (#19383) 或自動注入魔術鍵 (#19490).

🐛 錯誤處理

我們現在預設處理 chunk 錯誤 (#19086),這意味著如果您的網站透過重新部署進行更新,我們會在導航時自動處理重新載入

要停用此行為,請將 experimental.emitRouteChunkError 選項設定為 'manual',並使用新的reloadNuxtApp可組合項自行處理。瞭解我們是如何在chunk-reload.client.ts 外掛中實現的.

您還可以設定 experimental.restoreState 以在重新載入時保留部分應用程式狀態

nuxt.config.ts
defineNuxtConfig({
  experimental: {
    restoreState: true
  }
})

我們還有一個新的實驗性錯誤處理元件:<NuxtClientFallback> (#8216),它可以捕獲伺服器端渲染錯誤,用 fallback 內容替換它們,並精細地在客戶端觸發錯誤部分的重新渲染。這可以透過 experimental.clientFallback 啟用 - 非常歡迎反饋!

⚡️ Head 改進

我們已遷移到直接使用unhead(#19519) - 並自動從客戶端構建中 tree-shake 掉僅限伺服器的 head 可組合項,例如 useServerHead (#19576),這意味著您可以在不將僅與爬蟲相關的元標籤邏輯包含在客戶端構建中的情況下獲得出色的 SEO。

還有一個新的 useHeadSafe 可組合項,用於處理對不受信任的使用者輸入進行淨化 (#19548).

🪵 瀏覽器 DevTools 中更好的日誌記錄

與 Chrome DevTools 團隊合作,我們在 unjs + Nuxt 生態系統中推出了一些功能,這意味著我們現在對在(目前基於 Chromium 的)瀏覽器中隱藏 Nuxt 內部堆疊跟蹤提供了第一類支援#19243。我們還在涉及 Nuxt 鉤子的堆疊跟蹤方面進行了一些改進(unjs/hookable#69等等unjs/hookable#68)實現了console.createTask.

之前之後

💪 型別改進

伺服器 API 路由的型別現在更加正確 - 非可序列化型別已從返回型別中剝離 (unjs/nitro#1002).

我們現在還對 NuxtApp 進行了更多型別化,並正確型別化未知注入以提高型別安全性 (#19643).

如果您在使用 Nuxt 資料獲取可組合項時,在使用 transform + default 時遇到正確的型別問題,請不用擔心 - 我們現在正確推斷型別 (#19487).

⚗️ Nitro 增強功能

此版本附帶 Nitro v2.3,它帶來了許多自身的改進。檢視釋出說明瞭解更多資訊。

我們現在支援在 Nitro 伺服器路由中使用 useAppConfig (#19489) - 一個期待已久的更改。現在,useAppConfig 在您的應用程式中始終可用,用於來自層、模組等的非執行時配置。

我們還添加了一個 nitro:build:public-assets 鉤子,允許修改從 Nitro 預渲染/構建階段輸出的資產 (#19638).

🛠️ 構建更改

作為向對 PNP 和 pnpm 的一流支援,無需 --shamefully-hoist邁進的一部分,我們放棄了對一些使用 CJS 解析模式的內部(已棄用)實用程式的® (#19537等等#19608).

我們現在還使用 ESM 搜尋路徑解析諸如 nuxt@nuxt/kit 等依賴項。我們將密切關注這一點。

我們還在為支援新的 TypeScript Node16 模組解析做準備 (#19606),作為其中的一部分,我們更改了執行時輸出的格式(使用 .js 而不是 .mjs 副檔名,為子路徑匯出提供 types 欄位,等等)。

🗺️ 自定義配置架構(高階)

我們一直在測試一個實驗性功能,允許模組和使用者擴充套件 Nuxt 配置架構 (#15592),我們現在已預設啟用此功能 (#19172)。我們預計這對於模組和層/主題作者特別有用,並且應該為他們的使用者帶來更好的開發體驗。

更新日誌

檢視完整的更新日誌,透過比較更改或檢視GitHub 上的釋出.

我們衷心感謝為本次釋出做出貢獻的 28 位貢獻者 💚