发布·  

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 ImageVercel 上的使用(未来还将有更多自动提供商集成的潜力)。

💪 提高类型安全性

如果您正在使用我们在 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