Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。
发布·  

Nuxt 3.3

3.3.0 是一个次要(功能)版本,包含大量性能和开发体验改进、错误修复以及新功能。

✨ 本地模块开发体验

我们进行了一系列更改,以启用本地模块并改善开发体验。

我们现在会自动扫描您的 ~/modules 文件夹,并在您的项目中将顶级文件注册为模块 (#19394).

当这些文件发生更改时,我们将自动重启 Nuxt 服务器。

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

我们现在还公开了 nuxt/kit,以便在您的本地项目中轻松访问 kit 组合式函数,而无需安装 @nuxt/kit (#19422).

阅读有关本地模块的文档.

♻️ 重启 Nuxt

您可以将文件添加到 watch 数组中以自动重启服务器 (#19530)。这对于模块作者来说可能特别有用。您还可以使用新的 restart 钩子触发 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.
...

您还可以通过配置组合式函数在特定环境中进行 tree-shaking (#19383) 或自动注入魔术键 (#19490) 来选择加入一些 Nuxt 的内部优化。

🐛 错误处理

我们现在默认处理代码块错误 (#19086),这意味着如果您的网站在重新部署后更新,**我们将自动处理导航时的重新加载**。

要禁用此行为,请将 experimental.emitRouteChunkError 选项设置为 'manual' 并使用新的 reloadNuxtApp 组合式函数自行处理。详细了解我们在 chunk-reload.client.ts 插件 中是如何实现的。

您还可以设置 experimental.restoreState 以在重新加载时保留部分应用程序状态

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

我们还有一个新的实验性错误处理组件:<NuxtClientFallback> (#8216),它可以捕获服务器端渲染错误,用回退内容替换它们,并在客户端精细地触发重新渲染出错的部分。这可以通过 experimental.clientFallback 启用 - 非常欢迎反馈!

⚡️ Head 改进

我们已迁移为直接使用 unhead (#19519) - 并自动从客户端构建中 tree-shake 仅服务器端使用的 head 组合式函数,如 useServerHead (#19576),这意味着您可以在无需在客户端构建中包含仅与爬虫相关的元标签逻辑的情况下获得出色的 SEO。

还有一个新的 useHeadSafe 组合式函数,用于处理清理不可信的用户输入 (#19548).

🪵 浏览器 DevTools 中的改进日志记录

与 Chrome DevTools 团队合作,我们在 unjs + Nuxt 生态系统中实现了一些功能,这意味着我们现在可以优先支持从浏览器(目前为基于 Chromium 的浏览器)的日志中隐藏 Nuxt 内部堆栈跟踪 #19243。我们还在涉及 Nuxt 钩子的堆栈跟踪方面进行了一些改进 (unjs/hookable#69unjs/hookable#68),实现了 console.createTask

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

💪 类型改进

服务器 API 路由的类型现在更加准确 - 返回类型中已去除不可序列化的类型 (unjs/nitro#1002).

我们现在还对 NuxtApp 进行了更多类型化,并正确地对未知注入进行了类型化,以提高类型安全性 (#19643).

如果您在使用 transform + default 与 Nuxt 数据获取组合式函数时遇到类型不正确的问题,现在可以不用担心了 - 我们现在可以正确推断类型 (#19487).

⚗️ Nitro 增强

此版本附带 Nitro v2.3,它带来了许多自身改进。查看 发布说明 以获取更多信息。

我们现在支持在 Nitro 服务器路由中使用 useAppConfig (#19489) - 这是一个期待已久的功能。现在,useAppConfig 在整个应用程序中始终可用,用于从层、模块等获取非运行时配置。

我们还添加了一个 nitro:build:public-assets 钩子,允许修改 Nitro 预渲染/构建阶段输出的资产 (#19638).

🛠️ 构建更改

作为向 对 PNP 和 pnpm 提供一流支持(无需 --shamefully-hoist 的过渡的一部分,我们放弃了对使用 CJS 解析模式的一些内部(已弃用)实用程序的支持 (#19537#19608).

我们现在还使用 ESM 搜索路径解析 nuxt@nuxt/kit 等依赖项。我们将密切关注这一点。

我们还在为支持新的 TypeScript Node16 模块解析做准备 (#19606),并且在此过程中更改了运行时输出的格式(使用 .js 而不是 .mjs 扩展名,为子路径导出提供 types 字段,等等)。

🗺️ 自定义配置模式(高级)

我们一直在测试一项实验性功能,允许模块和用户扩展 Nuxt 配置模式 (#15592),并且我们现在已默认启用此功能 (#19172)。我们预计这对于模块和层/主题作者来说将特别有用,并且应该会为他们的用户带来更好的开发体验。

更改日志

通过 比较更改 或查看 GitHub 上的发布 来查看完整的更改日志。

我们要感谢所有 28 位参与此版本的贡献者 💚

← 返回博客