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

Nuxt 3.6

Nuxt 3.6 已发布,带来性能改进、完全静态服务器组件、更好的样式内联、静态预设、增强的类型安全等等。

 SPA 加载指示器

如果您的网站使用 ssr: false 提供服务,或者您在某些页面上禁用了服务器渲染,您可能会对新的 内置 SPA 加载指示器 特别感兴趣。

您现在可以在 ~/app/spa-loading-template.html 中放置一个 HTML 文件,其中包含一些您想用来渲染加载屏幕的 HTML 代码,这些代码将在您的应用程序在这些页面上进行水合之前渲染。

👉 默认情况下会渲染一个动画 Nuxt 图标。您可以通过在您的 Nuxt 配置文件中设置 spaLoadingTemplate: false 来完全禁用此指示器。

⚡️ 性能改进

您的应用程序进行水合时,首先会运行您的插件,因此我们现在对您的插件进行 构建时优化,这意味着它们不需要在运行时进行规范化或重新排序。

我们还将您的错误组件 JS 包含在您的主要入口点中,这意味着如果用户没有连接时发生错误,您仍然可以使用您的 ~/error.vue 处理它。(这应该也会减少您的总包大小。)

👉 与 Nuxt 3.5.3 相比,最小客户端包减少了约 0.7kB。让我们保持这种势头!

🔥 完全静态服务器组件

在静态页面上使用服务器组件是可能的,但直到现在,它们会增加应用程序的有效负载大小。现在情况不再如此。我们现在将 渲染的服务器组件存储为单独的文件,这些文件在导航之前预加载

👉 这确实依赖于新的、更丰富的 JSON 有效负载格式,因此请确保您没有通过将 experimental.renderJsonPayloads 设置为 false 来禁用它。

🎨 更好的样式内联

如果您正在密切监控您的指标并且没有关闭 experimental.inlineSSRStyles,您应该会看到页面中内联了更多的 CSS,并且外部 CSS 文件明显减少。我们现在 更善于对全局 CSS 进行去重,特别是由 Tailwind 或 UnoCSS 等库添加的 CSS。

🎬 动画控制

为了让您能够更精细地控制您的页面/布局组件,例如使用 GSAP 或其他库创建自定义过渡,我们现在允许您在 <NuxtPage> 上设置 pageRef 以及在 <NuxtLayout> 上设置 layoutRef。这些将传递到底层的 DOM 元素。

✨ 自动“静态”预设检测

到目前为止,运行 nuxt generate 会在每个部署提供程序上产生相同的输出,但使用 Nuxt 3.6,我们现在会自动启用 静态提供程序预设。这意味着如果您将静态构建(使用 nuxt generate 生成)部署到受支持的提供程序(目前是 Vercel 和 Netlify,Cloudflare 和 GitHub Pages 即将推出),我们将使用对该提供程序的特殊支持来预渲染您的页面。

这意味着我们可以配置任何不需要服务器函数的路由规则(重定向/标头等)。因此,在部署不需要运行时 SSR 的站点时,您应该可以获得两全其美。它还可以解锁在 Vercel 上使用 Nuxt Image(更多自动提供程序集成的可能性即将推出)。

💪 增强的类型安全

如果您使用 Nuxt 3.5 中提供的新的 ~/server/tsconfig.json,我们现在对服务器特定的 #imports 和增强功能提供了更好的支持。因此,当从服务器目录中的 #imports 导入时,您将获得 IDE 自动完成以获取 Nitro 中正确的导入位置,并且不会看到在服务器路由中不可用的 useFetch 等 Vue 自动导入。

您现在还应该有 对运行时 Nitro 钩子的类型支持

最后,我们 删除了更多对象具有默认 any 类型的位置。这应该会在许多未指定类型回退到 any 的 Nuxt 位置中提高类型安全性。

  • RuntimeConfig
  • PageMeta
  • NuxtApp['payload'](现在可从 NuxtPayload 接口访问)
  • ModuleMeta

如果您受到影响,可以在原始 PR 中了解有关如何 更新您的代码 的更多信息。

⚗️ 内置 Nitro 2.5

此版本附带新的 Nitro 2.5,它具有 一系列值得查看的令人兴奋的改进

特别值得注意的是对流的支持,它也由 Nuxt 本身的一些 更改 启用。

🛠️ 模块作者的新工具

此版本为模块作者提供了一些实用程序,以便轻松 添加类型模板断言与给定版本的另一个模块的兼容性

此外,此版本最终将解锁新的 nuxt/module-builder 模式,这应该会提高模块作者的类型支持。如果您是模块作者,可以考虑按照 这些迁移步骤 在接下来的几天里尝试一下。

✅ 升级

像往常一样,我们建议您运行以下命令进行升级:

npx nuxi upgrade --force

这也会刷新您的 lockfile,并确保您从 Nuxt 依赖的其他依赖项(特别是在 unjs 生态系统中)中提取更新。

📃完整更改日志

阅读 https://github.com/nuxt/nuxt/releases/tag/v3.6.0 上的完整发行说明

← 返回博客