Nuxt 3.6

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），我们将为该提供程序预渲染你的页面，以提供对该提供程序的特殊支持。

这意味着我们可以配置不需要服务器函数的任何路由规则（重定向/标头等）。因此，当部署一个不需要运行时服务器端渲染的站点时，你将获得两全其美的效果。它还解除了在 Vercel 上使用 Nuxt Image 的限制（未来还有更多与提供程序的自动集成的潜力）。

💪 增加类型安全性

如果你使用了我们在 Nuxt 3.5 中提供的新的 ~/server/tsconfig.json 并从服务器目录中导入了 #imports，我们现在对服务器特定的 #imports 和扩展提供更好的支持。在 Nitro 中，当从服务器目录中的 #imports 导入时，你将获得正确的导入位置的 IDE 自动补全，不会看到不可用于服务器路由的 Vue 自动导入，如 useFetch。

现在，你还可以为Nitro 运行时钩子提供类型支持。

最后，我们移除了更多对象默认为 any 类型的位置。这应该在一些未指定类型回退为任意类型的 Nuxt 中的地方改善了类型安全性：