借助 AI 智能体，在 Next.js 中减少 JavaScript 体积
内容提要
Next.js 16.4 推出面向 AI 智能体的打包优化技能 next-bundle-optimizer，基于 Turbopack 模块图分析导入关系，识别可延迟加载或移除的 JavaScript。Vercel 用其优化 v0 和 vercel.com，共减少近 2MB 压缩 JS。分析器还新增路由概览、快照对比和关键渲染路径过滤等人工分析功能。
延伸解读
AI 智能体如何定位可优化模块
next-bundle-optimizer 技能让 AI 智能体访问 Turbopack 的模块图，通过导出分析快照为 JSON 并重建模块与分块图来查询导入关系。智能体会识别大型连通模块组，追踪导入链，并用最小割算法找出少量可延迟加载的导入边界。随后它检查提议的改动是否符合源码和组件交互方式，确保优化不会破坏功能。
Vercel 实战中的典型优化场景
在 v0 和 vercel.com 上，智能体发现了多种常见问题：实验性代码编辑器被所有页面急切加载、集中式对话框注册表提前加载重型组件、未使用的组件仍被路由模块引用、共享工具文件意外引入整个可观测性查询引擎等。这些优化通过移除或延迟加载，在多数页面节省了数十到数百 KB 的压缩 JavaScript。
人工分析工具的新增能力
除了面向智能体的技能，交互式打包分析器也获得增强：路由概览首页突出最大的客户端路由；快照对比功能自动保存分析结果，可比较优化前后的体积变化；关键渲染路径过滤能隐藏异步依赖，只显示初始渲染同步加载的代码。这些工具帮助开发者自行调查包体积问题。
使用前提与注意事项
该技能依赖 Turbopack，需升级到 Next.js 16.4 并添加 next-bundle-optimizer 技能。默认模式下智能体仅报告问题和建议修复，运行 /next-bundle-optimizer fix 才会应用更改并重新分析对比快照。建议对每项更改创建独立拉取请求，并在预览部署中验证后再合并，以确保优化安全有效。
Q&A
Next.js 16.4 的 next-bundle-optimizer 技能是什么？它如何帮助减少 JavaScript 体积？
next-bundle-optimizer 是 Next.js 16.4 推出的面向 AI 智能体的打包优化技能。它基于 Turbopack 的模块图分析导入关系，识别可延迟加载或移除的 JavaScript，并给出优化建议。智能体可以自动应用修复、重新运行分析并对比快照来测量影响。
如何使用 next-bundle-optimizer 技能来优化我的 Next.js 应用？
首先升级到 Next.js 16.4，然后通过 npx skills add vercel/next.js --skill next-bundle-optimizer 添加技能。在 AI 智能体中运行 /next-bundle-optimizer 即可分析并报告问题。若要自动应用修复，运行 /next-bundle-optimizer fix，之后可让智能体为每个更改打开拉取请求。
next-bundle-optimizer 能发现哪些类型的打包问题？
该技能可以识别：意外静态导入导致无法延迟加载的模块、可移至 React Server Components 的逻辑、大型依赖的重复版本、以及 tree shaking 未生效而引入未使用代码的情况。它通过分析模块图并追踪导入链来定位这些问题。
Vercel 使用 next-bundle-optimizer 取得了哪些实际优化效果？
Vercel 用该技能审计了 v0 和 vercel.com 的前端，共减少近 2MB 的压缩 JavaScript。例如在 v0 中，延迟加载实验性代码编辑器节省了 150 KB，优化对话框注册表节省 40–650 KB；在 vercel.com 上，延迟加载 Markdown 渲染等节省了 255 KB，移除不必要的日期解析库节省 55 KB 等。
除了 AI 智能体，Next.js 的打包分析器为人工分析新增了哪些功能？
交互式打包分析器新增了路由概览主页，突出显示最大的客户端路由；表格视图可按大小排序查看贡献者；自动保存分析快照并支持对比差异；以及高亮关键渲染路径并过滤异步依赖，只显示初始加载的同步代码。
为什么即使使用了 React.lazy 延迟加载，某些组件仍然会被提前加载？
如果同一个打包块中有其他模块静态导入了该组件，那么即使使用了 React.lazy，该组件的代码仍会提前加载。next-bundle-optimizer 通过分析模块图来发现这类意外的静态导入关系，并建议调整导入边界以实现真正的延迟加载。
