Nuxt 4.1 新功能速览！支持 rolldown-vite！
Nuxt 4.1 新功能速览！支持 rolldown-vite！
前言
今天，Nuxt 同时发布了 4.1 和 3.9 版本，带来了多项实用优化。
Nuxt 推特
往期精彩推荐
正文
下面让我们一起来看看更新内容吧！
1. 增强 chunk 稳定性（import maps）
通过 import maps 显著提升构建稳定性，避免小变更导致大规模 hash 失效：
<!-- 自动注入 import map -->
<script type="importmap">{"imports":{"#entry":"/_nuxt/DC5HVSK5.js"}}</script>
默认启用，需要浏览器支持 import maps。如果配置 vite.build.target 不支持，会自动禁用。可手动关闭：
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
entryImportMap: false
}
})
这减少了 404 风险，提升缓存效率。
2. 实验性 Rolldown 支持
支持 rolldown-vite，提供 Rust 驱动的快速构建。通过 package.json overrides 启用：
{
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
重新安装依赖后，Nuxt 自动调整配置。实验性，可能有局限，但预示高性能 bundling 的未来。
3. 改进 lazy hydration
lazy hydration 宏现在无需 auto-imports，支持组件自动发现禁用时使用：
<script setup>
// 即使 components: false，也能工作
const LazyComponent = defineLazyHydrationComponent(
'visible',
() => import('./MyComponent.vue')
)
</script>
这提升了组件兼容性。
4. 增强页面规则
实验性 route rules 提取后，现在暴露在 NuxtPage 的 rules 属性，便于模块访问：
// 在模块中
nuxt.hook('pages:extend', pages => {
pages.push({
path: '/api-docs',
rules: {
prerender: true,
cors: true,
headers: { 'Cache-Control': 's-maxage=31536000' }
}
})
})
这改进模块架构。
5. 模块作者的新钩子：onInstall 和 onUpgrade
模块元数据中添加 name 和 version 后，支持 onInstall 和 onUpgrade 钩子：
export default defineNuxtModule({
meta: {
name: 'my-module',
version: '1.0.0',
},
onInstall(nuxt) {
console.log('首次安装 my-module!')
},
onUpgrade(inlineOptions, nuxt, previousVersion) {
console.log(`升级 my-module 从 v${previousVersion}`)
}
})
这让模块作者能实现“安装向导”，提升用户体验。通过 .nuxtrc 跟踪版本（需提交到版本控制）。
6. ignore 选项 for resolveFiles
resolveFiles 新增 ignore 选项，支持 glob 模式排除文件：
// 排除测试文件
const files = await resolveFiles(srcDir, '**/*.vue', {
ignore: ['**/*.test.vue', '**/__tests__/**']
})
这简化模块文件处理。
7. getLayerDirectories 工具
新工具 getLayerDirectories 提供干净接口访问层目录：
import { getLayerDirectories } from '@nuxt/kit'
const layerDirs = await getLayerDirectories(nuxt)
// layerDirs.app - /app/ 默认
// layerDirs.appPages - /app/pages 默认
// layerDirs.server - /server 默认
// layerDirs.public - /public 默认
这避免直接访问私有 API。
8. 简化 kit 工具
addServerImports 支持单个导入：
// 之前需数组
addServerImports([{ from: 'my-package', name: 'myUtility' }])
// 现在直接传入
addServerImports({ from: 'my-package', name: 'myUtility' })
9. 性能优化
内部优化包括 route rules 缓存管理、app manifest 监视和 TypeScript 页面元数据处理，提升整体性能。
❝3.19 也包含这些功能
10. 修复
- 改进 useFetch 类型。
- 处理 TypeScript 页面元数据表达式。
- 提升路由匹配和同步。
- 减少开发中 Vue 服务器警告。
- 优化相对时间计算。
最后
Nuxt 4.1 提升了构建稳定性和开发者体验，从 import maps 到模块钩子，这些功能让我们的项目更高效、更可靠！
今天的分享就这些，感谢大家的阅读！如果文章中存在错误的地方欢迎指正！
腾讯云开发者
