釋出·  

Nuxt 3.16

Nuxt 3.16 釋出了——功能豐富，效能提升
Daniel Roe

Daniel Roe

@danielroe.dev

這次更新內容很多！

⚡️ 全新的 Nuxt

歡迎使用 create-nuxt，一個用於啟動 Nuxt 專案的新工具（非常感謝@devgar捐贈了包名）！

它是 nuxi init 的精簡版——只有其六分之一的大小，並打包成一個單一檔案，所有依賴都內聯，以便您儘快開始。

啟動新專案就這麼簡單

npm create nuxt

特別感謝@cmang提供的精美 ASCII 藝術。❤️

想了解更多關於 Nuxt CLI 的發展方向嗎？檢視我們的路線圖此處，包括我們關於互動式模組選擇器.

的計劃。

我們已升級到 unhead v2，它是 Nuxt <head> 管理的引擎。此主要版本移除了廢棄項並改進了上下文的工作方式。

  • 對於 Nuxt 3 使用者，我們提供了舊版相容構建，因此不會出現任何問題。
  • 上下文實現現在透過 Nuxt 本身更加直接。
// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}

如果您直接在應用程式中使用 Unhead，請記住：

  1. 從 Nuxt 的自動匯入或 #app/composables/head 匯入，而不是從 @unhead/vue 匯入。
  2. 直接從 @unhead/vue 匯入可能會丟失非同步上下文。

不過別擔心——我們在 Nuxt 3 中保持了向後相容性，因此大多數使用者無需更改任何內容！

如果您選擇了 compatibilityVersion: 4，請檢視我們的升級指南以瞭解其他更改。

🔧 Devtools v2 升級

Nuxt Devtools 已升級到 v2 (#30889)!

您會喜歡自定義編輯器選擇、用於檢查已解析配置的 Discovery.js（非常適合除錯）、架構生成器的迴歸以及更精簡的依賴項等新功能。

我們最喜歡的一項改進是能夠跟蹤模組如何修改您的 Nuxt 配置——讓您對底層發生的事情一目瞭然。

👉 在Nuxt DevTools 釋出說明.

中瞭解所有詳細資訊。

我們持續讓 Nuxt 執行更快，v3.16 版本中有多項改進：

  1. 使用exsolve進行模組解析 (#31124) 以及 unjs 生態系統的其他部分（nitro、c12、pkg-types 等）——這大大加快了模組解析速度。
  2. 更智慧的模組解析路徑 (#31037)——優先處理直接匯入以提高效率。
  3. 消除了重複的 Nitro 別名解析 (#31088)——更精簡的檔案處理。
  4. 透過跳過不必要的解析步驟簡化了 loadNuxt (#31176)——更快的啟動速度。
  5. 在 Nuxt 外掛中採用 oxc-parser 進行解析 (#30066)

所有這些速度提升都是自動發生的——無需配置！

特別鳴謝CodSpeed與Vitest 基準測試一起在 CI 中測量這些改進——這非常有幫助。

據我個人經驗，我的個人網站roe.dev使用 v3.16 載入速度提高了 32%，而nuxt.com則提高了 28%。希望您也能看到類似的結果！⚡️

🕰️ 延遲水合支援

我們非常高興為您帶來原生延遲/懶水合支援 (#26468)！這讓您可以精確控制組件何時進行水合，從而提高初始載入效能和互動時間。我們利用了 Vue 內建的水合策略——請在 Vue 文件中檢視它們。.

<template>
  <!-- Hydrate when component becomes visible in viewport -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- Hydrate when browser is idle -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- Hydrate on interaction (mouseover in this case) -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- Hydrate when media query matches -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- Hydrate after a specific delay in milliseconds -->
  <LazyFooter :hydrate-after="2000" />
</template>

您還可以透過 @hydrated 事件監聽水合何時發生。

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

在我們的元件文件中瞭解更多關於延遲水合的資訊。

🧩 高階頁面配置

您現在可以微調 Nuxt 掃描哪些檔案作為頁面 (#31090)，從而更好地控制您的專案結構。

nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    // Filter specific files or directories
    pattern: ['**/*.vue'],
  }
})

🔍 增強的除錯功能

我們使 debug 選項的除錯更加靈活！現在您只需啟用所需的除錯日誌 (#30578):

nuxt.config.ts
export default defineNuxtConfig({
  debug: {
    // Enable specific debugging features
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})

) 即可。或者使用 debug: true 簡單地啟用所有這些除錯功能。

🎨 裝飾器支援

對於所有裝飾器愛好者（無論您是誰！），我們添加了實驗性支援 (#27672)。與所有實驗性功能一樣，我們非常感謝您的反饋。

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    decorators: true
  }
})

function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// returns 'decorated'

📛 命名層別名

千呼萬喚始出來！自動掃描的本地層（來自您的 ~~/layers 目錄）現在會自動建立別名。您可以透過 #layers/test 訪問您的 ~~/layers/test 層 (#30948)——無需配置。

如果您想為其他層設定命名別名，可以在層配置中新增一個名稱。

nuxt.config.ts
export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})

這將建立別名 #layers/example-layer 指向您的層——使匯入更清晰、更直觀。

🧪 錯誤處理改進

我們大大改進了錯誤訊息和源跟蹤 (#31144):

  1. )。現在對未定義的 useAsyncData 呼叫提供更精確的檔案位置資訊和更好的警告。
  2. 在島嶼頁面錯誤時，錯誤頁面現在會正確顯示 (#31081)

)。此外，我們現在使用 Nitro 優雅的錯誤處理 (由youch提供支援) 在終端中提供更有用的錯誤訊息，並支援堆疊跟蹤。

Nitro 現在還自動應用源對映，無需額外的 Node 選項，並且我們在渲染錯誤頁面時設定了適當的安全頭部。

📦 模組開發改進

對於模組作者，我們增加了使用 addTypeTemplate 增強 Nitro 型別的功能 (#31079):

// Inside your Nuxt module
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})

)。

我們已升級到 Nitro v2.11。有太多改進，我無法在這些簡短的釋出說明中全部涵蓋。

👉 在Nitro v2.11.0 釋出說明.

中檢視所有詳細資訊。

此版本包括 unjs 生態系統的多個主要版本升級，重點是透過僅 ESM 的分發來提高效能和縮小捆綁包大小。

  • unenv 升級到 v2（完全重寫）
  • db0 升級到 v0.3（僅 ESM，原生 node:sql，改進）
  • ohash 升級到 v2（僅 ESM，原生 node:crypto 支援，速度快得多）
  • untyped 升級到 v2（僅 ESM，安裝大小更小）
  • unimport 升級到 v4（改進）
  • c12 升級到 v3（僅 ESM）
  • pathe 升級到 v2（僅 ESM）
  • cookie-es 升級到 v2（僅 ESM）
  • esbuild 升級到 v0.25
  • chokidar 升級到 v4

✅ 升級

像往常一樣，我們建議您執行以下命令進行升級

npx nuxi@latest upgrade --dedupe

這會重新整理您的 lockfile 並拉取 Nuxt 依賴的所有最新依賴項，尤其是來自 unjs 生態系統的依賴項。

完整的釋出說明

閱讀 Nuxt v3.16.0 的完整發布說明。

衷心感謝所有參與本次釋出的人。❤️

我知道此版本中有很多非常重要的更改——如果您有任何反饋或問題，請隨時告訴我們！🙏

← 返回部落格
Nuxt 在領英上Nuxt on BlueskyNuxt 在 X 上