发布·  

Nuxt 3.6

Nuxt 3.6 发布,带来了性能改进、完全静态的服务器组件、更好的样式内联、静态预设、更高的类型安全——以及更多功能。
Daniel Roe

Daniel Roe

@danielroe.dev

 SPA 加载指示器

如果您的网站使用 ssr: false 提供服务,或者您已禁用某些页面的服务器渲染,您可能会对新的内置 SPA 加载指示器.

特别感兴趣。您现在可以在 ~/app/spa-loading-template.html 中放置一个 HTML 文件,其中包含您希望用于渲染加载屏幕的 HTML,该屏幕将在您的应用程序在这些页面上完成水合之前渲染。

在 Nuxt v4 中(或使用 compatibilityMode: 4),此路径现在为 ~/spa-loading-template.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 导入时,您将获得 Nitro 中正确导入位置的 IDE 自动补全,并且不会看到在服务器路由中不可用的 Vue 自动导入,例如 useFetch

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

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

  • 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