Nuxt 4.1 版本新功能速览！支持 rolldown-vite 了！

前言

今天，Nuxt 同时发布了 4.1 和 3.9 版本，带来了多项实用优化。

往期精彩推荐

正文

下面让我们一起来看看更新内容吧！

1. 增强 chunk 稳定性（import maps）

通过 import maps 显著提升构建稳定性，避免小变更导致大规模 hash 失效：

xml 复制代码

<!-- 自动注入 import map -->
<script type="importmap">{"imports":{"#entry":"/_nuxt/DC5HVSK5.js"}}</script>

默认启用，需要浏览器支持 import maps。如果配置 vite.build.target 不支持，会自动禁用。可手动关闭：

typescript 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    entryImportMap: false
  }
})

这减少了 404 风险，提升缓存效率。

2. 实验性 Rolldown 支持

支持 rolldown-vite，提供 Rust 驱动的快速构建。通过 package.json overrides 启用：

json 复制代码

{
  "overrides": {
    "vite": "npm:rolldown-vite@latest"
  }
}

重新安装依赖后，Nuxt 自动调整配置。实验性，可能有局限，但预示高性能 bundling 的未来。

3. 改进 lazy hydration

lazy hydration 宏现在无需 auto-imports，支持组件自动发现禁用时使用：

vue 复制代码

<script setup>
// 即使 components: false，也能工作
const LazyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./MyComponent.vue')
)
</script>

这提升了组件兼容性。

4. 增强页面规则

实验性 route rules 提取后，现在暴露在 NuxtPage 的 rules 属性，便于模块访问：

javascript 复制代码

// 在模块中
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 钩子：

typescript 复制代码

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 模式排除文件：

javascript 复制代码

// 排除测试文件
const files = await resolveFiles(srcDir, '**/*.vue', {
  ignore: ['**/*.test.vue', '**/__tests__/**']
})

这简化模块文件处理。

7. getLayerDirectories 工具

新工具 getLayerDirectories 提供干净接口访问层目录：

javascript 复制代码

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 支持单个导入：

javascript 复制代码

// 之前需数组
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// 现在直接传入
addServerImports({ from: 'my-package', name: 'myUtility' })

9. 性能优化

内部优化包括 route rules 缓存管理、app manifest 监视和 TypeScript 页面元数据处理，提升整体性能。

注意：3.19 也包含这些功能

10. 修复

改进 useFetch 类型。
处理 TypeScript 页面元数据表达式。
提升路由匹配和同步。
减少开发中 Vue 服务器警告。
优化 NuxtTime 相对时间计算。

最后

Nuxt 4.1 提升了构建稳定性和开发者体验，从 import maps 到模块钩子，这些功能让我们的项目更高效、更可靠！

今天的分享就这些，感谢大家的阅读！如果文章中存在错误的地方欢迎指正！