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 上的完整发行说明