前言
大家好，我是刘明，十年创业老兵，开源技术爱好者。
2023年6月23日，Nuxt开发团队发布了Nuxt 3.6.0版本. 我从3.4版本开始，基本是紧跟官方团队进行升级。目前基本是一个月进行一次大的版本升级。
今天我们来看一下Nuxt3.6有哪些新特性。
关于Nuxt 3.6
Nuxt 3.6 已发布，带来了性能改进、完全静态的服务器组件、更好的样式内联、静态预设、增强的类型安全性等等。
特性一:SPA 加载指示器
如果您的网站在某些页面上提供ssr: false或禁用了服务器渲染，您可能会对新的内置 SPA 加载指示器特别感兴趣。
现在，您可以创建一个名为~/app/spa-loading-template.html的HTML 文件用来渲染加载屏幕，直到您的应用程序在这些页面上水合为止。
默认情况下会渲染一个动画 Nuxt 图标。 您可以通过在 nuxt 配置文件中进行spaLoadingTemplate: false设置来完全禁用该指示器。
特性二:性能改进
当应用程序水合时最先发生的是插件运行，因此我们现在对您的插件执行构建时优化，这意味着它们不需要在运行时标准化或重新排序。
我们还将错误组件 JS 包含在您的主入口点中，这意味着如果用户没有连接时发生错误，您仍然可以使用~/error.vue. （这也会减少您的总包大小。）
与 Nuxt 3.5.3 相比，最小客户端包减少了约 0.7kB。
特性三:全静态服务器组件
在3.6版本之前，我们可以在静态页面上使用服务器组件，但它们会增加应用程序的有效负载大小。3.6版本改变了这一情况。我们现在将渲染的服务器组件存储为单独的文件，这些文件在导航之前预加载。
这依赖于新的、更丰富的 JSON 有效负载格式，因此请确保您没有通过设置experimental.renderJsonPayloads:false 来禁用它。
特性四:更好的样式内联
如果您正在密切监控指标并且尚未关闭experimental.inlineSSRStyles，您应该会看到页面中内联了更多 CSS，以及明显的外部 CSS 文件。我们现在更擅长对全局 CSS 进行重复数据删除，特别是由 tailwind 或 unocss 等库添加的内容。
特性五:动画控件
为了让您对页面/布局组件进行更细粒度的控制，例如使用 GSAP 或其他库创建自定义过渡，我们现在允许您在中设置pageRef，在中设置layoutRef。这些将传递到底层 DOM 元素。
特性六:自动“静态”预设检测
在Nuxt 3.6之前，nuxt generate 在每个服务提供商都会产生相同的输出，但在 Nuxt 3.6 中，我们现在自动启用静态提供程序预设。这意味着，如果您将静态构建（使用 nuxt generate 生成）部署到受支持的提供商（目前有 vercel 和 netlify，cloudflare 和 github pages即将推出），我们将通过对该提供商的特殊支持来预渲染您的页面。
这意味着我们可以配置任何不需要服务器功能的路由规则（重定向/标头/等）。因此，在部署不需要runtime SSR 的站点时，您会受益良多。它还解锁了Vercel 上Nuxt Image的使用。
特性七:提高类型安全性
如果您使用的~/server/tsconfig.json是我们在 Nuxt 3.5 中提供的#imports新功能，我们现在可以更好地支持特定于服务器的功能和增强功能。因此，当从#imports服务器目录中导入时，您将获得 Nitro 中正确导入位置的 IDE 自动完成功能，并且不会看到useFetch服务器路由中不可用的 Vue 自动导入。
您现在还应该具有对运行时 Nitro hooks 的类型支持。
最后，我们删除了更多对象具有默认any类型的位置。这应该可以提高 Nuxt 中许多位置的类型安全性，其中未指定的类型会回退到任何：
- RuntimeConfig
- PageMeta
- NuxtApp[‘payload’]（现在可以从NuxtPayload界面访问）
- ModuleMeta
如果这对您产生影响，您可以在原始 PR 中了解有关如何更新代码的更多信息。
内置Nitro 2.5
此版本附带新的 Nitro 2.5，其中包含一系列令人兴奋的改进，值得一试。
特别值得注意的是对流的实验性支持，这也是通过Nuxt 本身的一些更改实现的。
模块作者的新工具
此版本为模块作者提供了许多实用程序，可以轻松添加类型模板并断言与另一个模块的给定版本的兼容性。
此外，此版本最终将解锁一种新nuxt/module-builder模式，该模式将改善对模块作者的类型支持。如果您是模块作者，您可以考虑按照这些迁移步骤在未来几天进行尝试。
升级
像往常一样，我们的升级建议是运行：
npx nuxi upgrade --force
复制到剪贴板
这也将刷新您的package-lock.json文件，并确保您从 Nuxt 依赖的其他依赖项中提取更新，特别是在 unjs 生态系统中。
如果有童鞋全局安装了nuxi，则不需要前面的npx，只需要像下面这样写：
nuxi upgrade --force
结语
Nuxt的主要功能已经基本稳定，每次更新带来的主要是性能优化。很多童鞋可能感觉不到这种细小的性能优化，所以升级不升级都没有关系。如果升级中遇到任何问题，欢迎随时私信。