发布·  

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 上