透過 100 多個技巧的集合來學習 Nuxt!
發布·  

Nuxt 3.3

3.3.0 是一個次要(功能)版本,具有許多效能和 DX 改善、錯誤修復以及可供使用的新功能。

✨ 本地模組開發 DX

我們進行了一系列變更,以啟用本地模組並改善 DX。

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

當這些檔案變更時,我們會自動重新啟動 nuxt 伺服器。

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

我們現在也公開了 nuxt/kit,以便在您的本地專案中輕鬆存取 kit composable,而無需安裝 @nuxt/kit (#19422)。

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

♻️ 重新啟動 Nuxt

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

🔥 效能改進

我們已將靜態資源 maxAge 增加到 1 年,作為最佳實務 (#19335),並支援更多建置的 tree-shaking (#19508)。

nuxt-performance-improvements

我們現在也支援使用物件語法預載具有路由的 <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.
...

您也可以選擇加入 Nuxt 的一些內部最佳化,方法是將 composable 設定為在特定環境中進行 treeshaken (#19383) 或自動注入 magic key (#19490)。

🐛 錯誤處理

我們現在預設處理 chunk 錯誤 (#19086),這表示如果您的網站透過重新部署更新,**我們會自動處理在導覽時重新載入它**。

若要停用此行為,請將 experimental.emitRouteChunkError 選項設定為 'manual',並使用新的 reloadNuxtApp composable 自行處理。請參閱我們的 chunk-reload.client.ts plugin,以了解我們如何實作。

您也可以設定 experimental.restoreState 以在重新載入時保留一些應用程式狀態

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

我們還有一個新的實驗性錯誤處理元件:<NuxtClientFallback> (#8216),它可以捕獲在伺服器上呈現時發生的錯誤,並將它們替換為 fallback 內容,並在用戶端上細緻地觸發重新呈現發生錯誤的部分。可以使用 experimental.clientFallback 啟用此功能 - 非常歡迎提供意見反應!

⚡️ Head 改善

我們已遷移為直接使用 unhead (#19519) - 並自動從您的用戶端建置中 tree-shake 僅伺服器端 head composable,例如 useServerHead (#19576),這表示您可以擁有出色的 SEO,而無需在用戶端建置中包含僅與爬蟲程式相關的中繼標籤邏輯。

還有一個新的 useHeadSafe composable,可處理清理不受信任的使用者輸入 (#19548)。

🪵 瀏覽器 DevTools 中更好的記錄

透過與 Chrome DevTools 團隊合作,我們在 unjs + Nuxt 生態系統中實現了一些功能,這表示我們現在擁有一流的支援,可從您(目前為止基於 Chromium 的)瀏覽器 #19243 中的記錄中隱藏 Nuxt 內部堆疊追蹤。我們也針對涉及 Nuxt hook 的堆疊追蹤進行了一些改進 (unjs/hookable#69unjs/hookable#68),實作了 console.createTask

之前之後
before-nuxt-console-improvementsafter-nuxt-console-improvements

💪 類型改進

伺服器 API 路由的類型現在更正確 - 從傳回類型中剝離了不可序列化的類型 (unjs/nitro#1002)。

我們現在也輸入了更多 NuxtApp 的類型,並正確輸入了未知注入的類型,以提高類型安全性 (#19643)。

如果您在使用 Nuxt 資料擷取 composable 的 transform + default 時,在正確的類型方面遇到困難,請不再擔心 - 我們現在可以正確地推斷類型 (#19487)。

⚗️ Nitro 增強功能

此版本隨附 Nitro v2.3,它帶來了許多自身的改進。請查看 發布版本 以取得更多資訊。

我們現在支援在 nitro 伺服器路由中使用 useAppConfig (#19489) - 這是一個期待已久的變更。現在,useAppConfig 在您的應用程式中始終可用,適用於來自層、模組等的非執行階段組態。

我們也新增了 nitro:build:public-assets hook,以允許修改來自 nitro 的預先呈現/建置階段的資源輸出 (#19638)。

🛠️ 建置變更

作為朝向 一流支援 PNP 和無需 --shamefully-hoist 的 pnpm 支援 的一部分,我們已停止支援使用 CJS 解析模式的一些內部(已棄用)公用程式 (#19537#19608)。

我們現在也使用 ESM 搜尋路徑解析 nuxt@nuxt/kit 等相依性。我們將密切關注這一點。

我們也正在為支援新的 TypeScript Node16 模組解析 (#19606) 奠定基礎,並且作為其中的一部分,我們已變更執行階段輸出的格式(使用 .js 而非 .mjs 副檔名、為子路徑匯出提供 types 欄位等等)。

🗺️ 自訂組態架構(進階)

我們一直在測試一項實驗性功能,以允許模組和使用者擴充 Nuxt 組態架構 (#15592),而我們現在預設已啟用此功能 (#19172)。我們預期這對於模組和層/主題作者特別有用,並且應該為他們的使用者帶來更友善的 DX。

變更記錄

請透過比較變更或查看 GitHub 上的發布版本,查看完整的變更記錄。

我們要感謝所有協助此版本的 28 位貢獻者 💚