v3.16
GitHub
Release·  

Nuxt 3.16

Nuxt 3.16 已发布 - 充满了功能和性能提升
Daniel Roe

Daniel Roe

@danielroe.dev

这次更新内容丰富！

⚡️ 一个全新的 Nuxt

欢迎使用 create-nuxt，一个启动 Nuxt 项目的新工具（感谢 @devgar 捐赠的包名）！

它是 nuxi init 的精简版 - 体积只有六分之一，所有依赖项都内联打包为一个单独文件，帮助您尽快开始。

创建新项目如此简单：

npm create nuxt

创建 nuxt 应用的截图

特别感谢 @cmang 提供的 美丽 ASCII 艺术。❤️

想了解更多关于 Nuxt CLI 的发展方向吗？请查看我们的路线图 这里，包括我们关于 交互式模块选择器 的计划。

🚀 Unhead v2

我们升级到了 unhead v2，这是 Nuxt <head> 管理的引擎。这个主要版本移除了不推荐的功能，并改进了上下文的工作方式：

  • 对于 Nuxt 3 用户，我们提供了一个遗留兼容构建，确保没有功能中断
  • 上下文实现现在通过 Nuxt 本身更直接
// Nuxt 现在重新导出函数，同时正确解析上下文
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>
  <!-- 当组件在视口中可见时进行水合 -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- 当浏览器空闲时进行水合 -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- 在交互发生时进行水合（此例为鼠标悬停） -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- 当媒体查询匹配时进行水合 -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- 延时水合，毫秒为单位 -->
  <LazyFooter :hydrate-after="2000" />
</template>

您还可以通过 @hydrated 事件监听水合发生的时机：

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

了解更多关于懒水合的信息，请查看 我们的组件文档。

🧩 高级页面配置

您现在可以微调 Nuxt 扫描哪些文件作为页面（#31090），更好地控制您的项目结构：

nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    // 过滤特定文件或目录
    pattern: ['**/*.vue'],
  }
})

🔍 增强调试

我们使得使用 debug 选项进行调试变得更为灵活！现在您可以仅启用所需的调试日志 (#30578)：

nuxt.config.ts
export default defineNuxtConfig({
  debug: {
    // 启用特定调试功能
    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()
// 返回 '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)：

// 在您的 Nuxt 模块内部
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

这将刷新您的锁定文件并拉取 Nuxt 依赖的所有最新版本，尤其是来自 unjs 生态系统的。

完整发布说明

阅读 Nuxt v3.16.0 的完整发布说明。

衷心感谢每一位参与此次发布的人员。❤️

我知道在这次发布中有很多非常重要的变化 - 如果您有任何反馈或问题，请随时告知我们！🙏

← 返回博客
Nuxt on LinkedInNuxt on X