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 自动完成功能,并且不会看到在服务器路由中不可用的 Vue 自动导入,例如 useFetch
。
你现在还应该对运行时 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 生态系统中)中提取更新。