Nuxt 3.6 正式发布!

开发 前端
Nuxt 3.6 正式发布,该版本带来了性能优化、完全静态的服务端组件、更好的样式内联、静态预设、增强的类型安全等许多功能改进。

6 月 23 日,Nuxt 3.6 正式发布,该版本带来了性能优化、完全静态的服务端组件、更好的样式内联、静态预设、增强的类型安全等许多功能改进。

SPA 加载指示器

如果网站使用ssr: false提供服务,或者在某些页面上禁用了服务端渲染,那么可能会用到新的内置 SPA 加载指示器。

现在可以在 ~/app/spa-loading-template.html 中放一个 HTML 文件,其中包含用于渲染加载屏幕的 HTML 内容,在这些页面上,加载屏幕将一直显示,直到应用完成渲染。

默认会渲染一个 Nuxt 图标动画。可以通过在 nuxt 配置文件中设置spaLoadingTemplate: false来禁用这个指示器。

性能优化

当应用渲染时,首先会运行插件,该版本对插件进行了构建时优化,这意味着它们在运行时不需要进行规范化或重新排序。

除此之外,还将错误组件的 JavaScript 包含在主入口文件中,这意味着如果用户在没有连接的情况下发生错误,仍然可以通过 ~/error.vue 处理它(这也会减少整体包大小)。

与 Nuxt 3.5.3 相比,最小的客户端包减少了约 0.7 KB。

完全静态的服务器组件

在静态页面上使用服务端组件是可行的,但是会增加应用的载荷大小。新版本将渲染的服务端组件存储为单独的文件,在导航之前进行预加载。

这依赖于新的、更丰富的 JSON 载荷格式,所以请确保没有将 experimental.renderJsonPayloads 设置为 false 来禁用它。

更好的样式内联

如果密切监控指标,并且没有关闭 experimental.inlineSSRStyles,应该能看到更多的 CSS 内联到页面中,并且外部 CSS 文件显著减少。新版本更擅长去重全局 CSS,特别是由类似 tailwind 或 unocss 等库添加的 CSS。

动画控制

为了可以对页面/布局组件有更精细的控制,例如使用GSAP 或其他库创建自定义过渡效果,现在允许在<NuxtPage>上设置pageRef,在<NuxtLayout>上设置layoutRef。这些将被传递到底层的 DOM 元素中。

自动检测“static”预设

到目前为止,运行 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 自动完成,并且不会看到诸如 useFetch 等不可用于服务端路由的 Vue 自动导入。

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

最后,该版本还删除了更多对象具有默认 any 类型的位置。这应该可以提高 Nuxt 中许多位置的类型安全性,其中未指定的类型会回退到 any:

  • RuntimeConfig
  • PageMeta
  • NuxtApp['payload']
  • ModuleMeta

Nitro 2.5

这个版本配备了全新的 Nitro 2.5,该版本提供了流式传输的实验性支持,这也由 Nuxt 本身的一些变化启用。

模块作者的新工具

这个版本为模块作者提供了一些实用工具,以便轻松地添加类型模板并断言与另一个模块的特定版本的兼容性。此外,这个版本将最终解锁一个新的 nuxt/module-builder模式,可以提高模块作者的类型支持。

升级

建议运行以下命令进行升级:

nuxi upgrade --force

这将刷新 lock 文件,并确保从 Nuxt 依赖的其他依赖项中获取更新,特别是在 unjs 生态系统中。

Release Note:https://nuxt.com/blog/v3-6。

责任编辑:姜华 来源: 前端充电宝
相关推荐

2023-06-24 23:11:07

2010-01-22 11:10:21

MozillaFirefox 3.6

2023-05-18 09:00:39

Nuxt类型Nuxt 2

2010-01-22 09:04:02

Firefox 3.6新版发布

2023-08-27 09:08:45

CLI工具Web

2024-01-31 12:13:22

2010-01-21 09:21:57

Firefox发布日期

2013-11-26 10:34:00

IT运维管理BTIM北塔

2012-08-08 10:00:44

JavaScript

2010-06-23 17:52:47

Eclipse 3.6Java

2010-06-07 09:04:41

Eclipse 3.6

2023-10-20 10:11:00

Nuxt 3.8前端

2011-12-22 09:08:19

Java

2010-01-12 09:13:09

Firefox 3.6下载

2012-09-27 13:04:52

GNOME

2009-12-23 09:11:51

Firefox版本发布

2010-01-18 09:05:55

Firefox 3.6下载

2010-01-25 13:04:22

2010-01-27 09:51:02

MozillaFirefox 3.6

2011-06-22 09:42:18

Firefox 5.0Mozilla
点赞
收藏

51CTO技术栈公众号