通过 100+ 条技巧合集学习 Nuxt!
发布·  

Nuxt 3.6

Nuxt 3.6 发布了,带来了性能改进、完全静态的服务器组件、更优的样式内联、静态预设、增强的类型安全 - 以及更多。

 SPA 加载指示器

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

你现在可以将一个 HTML 文件放在 ~/app/spa-loading-template.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 导入时,你将在 Nitro 中获得正确的导入位置的 IDE 自动完成,并且不会看到像 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 阅读完整的发行说明