发布·  

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

我们已升级到 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（非常适合调试）、schema 生成器的回归以及更精简的依赖项。

我们最喜欢的一个改进是能够跟踪模块如何修改您的 Nuxt 配置——让您对幕后发生的一切拥有 X 射线般的洞察力。

👉 在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. 错误页面现在在 island 页面错误时正确显示 (#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。有太多改进了——我无法在这些简短的发布说明中全部涵盖。

👉 查看所有详细信息，请参阅Nitro v2.11.0 发布说明.

📦 新的 unjs 主要版本

此版本包含 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 上