✨ 本地模块开发 DX
我们进行了一系列更改,以启用本地模块并改进 DX。
我们现在会自动扫描您的 ~/modules
文件夹,并将那里的顶层文件注册为项目中的模块 (#19394)。
当这些文件发生更改时,我们将自动重启 nuxt 服务器。
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
- '~/modules/purge-comments'
]
})
我们现在还公开 nuxt/kit
,以便在您的本地项目中轻松访问 kit composables,而无需安装 @nuxt/kit
(#19422)。
♻️ 重启 Nuxt
您可以将文件添加到 watch
数组以自动重启服务器 (#19530)。 这对于模块作者来说可能特别有用。您还可以使用新的 restart
钩子触发 Nuxt 服务器的重启 (#19084)。
🔥 性能提升
作为最佳实践,我们将静态资源 maxAge 增加到 1 年 (#19335),并支持更多构建的 tree-shaking (#19508)。
我们现在还支持使用对象语法的路由预加载 <NuxtLink>
(#19120)
<NuxtLink :to="{ name: 'home', query: { year: '2023' } }">Home</NuxtLink>
我们还会跟踪您使用的每个模块执行其设置所花费的时间,并在时间过长时发出警告。您可以通过使用 DEBUG=1
运行您的开发服务器来查看所有这些值 (#18648)。
DEBUG=1 npx nuxt dev
ℹ Module pages took 1.5ms to setup.
ℹ Module meta took 3.15ms to setup
ℹ Module components took 4.5ms to setup.
...
您还可以通过配置在特定环境中进行 tree-shaken 的 composables (#19383) 或自动注入魔法键 (#19490) 来选择启用 Nuxt 的一些内部优化。
🐛 错误处理
我们现在默认处理块错误 (#19086),这意味着如果您的站点通过重新部署进行更新,**我们会在导航时自动处理重新加载**。
要禁用此行为,请将 experimental.emitRouteChunkError
选项设置为 'manual'
,并使用新的 reloadNuxtApp
composable自行处理。 了解更多关于我们如何在 chunk-reload.client.ts 插件中实现的信息。
您还可以设置 experimental.restoreState
以在重新加载时保留一些应用程序状态
defineNuxtConfig({
experimental: {
restoreState: true
}
})
我们还有一个新的实验性错误处理组件:<NuxtClientFallback>
(#8216),它可以捕获服务器上渲染的错误,将其替换为回退内容,并在客户端上细粒度地触发错误部分的重新渲染。 可以使用 experimental.clientFallback
启用 - 非常欢迎反馈!
⚡️ Head 改进
我们已迁移到直接使用 unhead (#19519) - 并自动从您的客户端构建中删除仅限服务器的 head composables,如 useServerHead
(#19576),这意味着您可以拥有出色的 SEO,而无需在客户端构建中包含仅与爬虫相关的 meta 标签逻辑。
还有一个新的 useHeadSafe
composable,用于处理清理不受信任的用户输入 (#19548)。
🪵 在浏览器 DevTools 中更好的日志记录
通过与 Chrome DevTools 团队的合作,我们在 unjs + Nuxt 生态系统中实现了一些功能,这意味着我们现在对在(目前是基于 Chromium 的)浏览器中从日志中隐藏 Nuxt 内部堆栈跟踪提供了一流的支持 #19243。 我们还在涉及 Nuxt 钩子的堆栈跟踪方面进行了一些改进 (unjs/hookable#69 和 unjs/hookable#68) 实现了 console.createTask
。
之前 | 之后 |
---|---|
💪 类型改进
服务器 API 路由的类型现在更加正确 - 返回类型中删除了不可序列化的类型 (unjs/nitro#1002)。
我们现在还对 NuxtApp
的更多部分进行类型化,并正确键入未知注入以提高类型安全性 (#19643)。
如果您在使用 transform
+ default
与 Nuxt 数据获取 composables 时遇到正确的类型问题,那么不用担心 - 我们现在可以正确推断类型 (#19487)。
⚗️ Nitro 增强功能
此版本附带了 Nitro v2.3,它本身带来了许多改进。 查看该版本以获取更多信息。
我们现在支持在 nitro 服务器路由中使用 useAppConfig
(#19489) - 一个期待已久的更改。 现在,useAppConfig
在您的整个应用程序中始终可用,用于来自层、模块等的非运行时配置。
我们还添加了一个 nitro:build:public-assets
钩子,允许修改来自 nitro 的预渲染/构建阶段的资产输出 (#19638)。
🛠️ 构建更改
作为朝着 一流支持 PNP 和在没有 --shamefully-hoist
的情况下支持 pnpm 的一部分,我们删除了对使用 CJS 解析模式的一些内部(已弃用)实用程序的支持 (#19537 和 #19608)。
我们现在还使用 ESM 搜索路径解析诸如 nuxt
、@nuxt/kit
等依赖项。 我们将密切关注这一点。
我们还为支持新的 TypeScript Node16 模块解析做准备 (#19606),并且作为其中的一部分,我们更改了运行时输出的格式(使用 .js
而不是 .mjs
扩展名,为子路径导出提供 types
字段等等)。
🗺️ 自定义配置模式(高级)
我们一直在测试一项实验性功能,以允许模块和用户扩展 Nuxt 配置模式 (#15592),我们现在默认启用了此功能 (#19172)。 我们预计这对模块和层/主题作者特别有用,并且应该为他们的用户带来更好的 DX。
更新日志
通过比较更改或查看GitHub 上的版本来查看完整的更新日志。
我们要感谢 28 位为此版本做出贡献的贡献者 💚