SPA 加载指示器
如果你的网站使用 ssr: false 提供服务,或者你在某些页面上禁用了服务端渲染,你可能会对这个全新的 内置 SPA 加载指示器 特别感兴趣。
现在你可以在 ~/app/spa-loading-template.html 中放置一个 HTML 文件,其中包含你想用于渲染加载屏幕的 HTML 代码,该屏幕将在这些页面上呈现,直到你的应用完成激活。
compatibilityMode: 4 时),此路径变更为 ~/spa-loading-template.html。👉 默认会渲染一个动画的 Nuxt 图标。你可以通过在 nuxt 配置文件中设置 spaLoadingTemplate: false 来完全禁用此指示器。
⚡️ 性能提升
应用激活时首先发生的事情是运行你的插件,因此我们现在对插件进行 构建时优化,这意味着它们在运行时不再需要进行规范化或重新排序。
我们还将错误组件的 JS 包含在主入口点中,这意味着如果用户在没有网络连接时发生错误,你仍然可以使用 ~/error.vue 来处理它。(这也应该会减少你的总体打包体积。)
👉 与 Nuxt 3.5.3 相比,最小客户端打包体积减少了约 0.7kB。让我们继续保持!
🔥 完全静态的服务端组件
在静态页面上使用服务端组件一直都是可行的,但直到现在,它们仍会增加应用程序的 payload 大小。现在情况不同了。我们现在将 渲染后的服务端组件存储为单独的文件,并在导航前进行预加载。
👉 这依赖于全新、更丰富的 JSON payload 格式,因此请确保你没有通过将 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
RuntimeConfigPageMetaNuxtApp['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 阅读完整的发布说明