Ship less JavaScript in Next.js with your AI agent

在 Next.js 中通过 AI 代理减少 JavaScript 传输量 | Next.js

2026年10月28日

博客

在 Next.js 中通过 AI 代理减少 JavaScript 传输量

Will Binns-Smith

随着代码库的增长，JavaScript 模块之间导入关系的细微变化会显著影响用户加载和体验应用的速度。在 Next.js 16.1 中，我们推出了 Turbopack Bundle Analyzer 的初始版本，为开发者提供了对其应用 JavaScript 包的洞察。

现在，在 Next.js 16.4 中，我们为你的 AI 代理提供了分析这些关系并优化包的工具。在 Vercel，代理已识别并削减了 v0 和 vercel.com 上近 2MB 的压缩 JavaScript 代码，许多关键页面节省了数百 KB。让我们深入了解其工作原理。

将此标题链接复制到剪贴板：现在为代理提供包分析功能

Next.js 现在包含一个代理技能，可自动优化你的应用 JavaScript 包。由于它使用详细的模块图，分析器需要 Turbopack，这是自 Next.js 16 以来的默认打包工具。

首先，升级到 Next.js 16.4 并添加 next-bundle-optimizer 技能。

终端

npx
skills
add
vercel/next.js
--skill
next-bundle-optimizer

然后在你的 AI 代理中通过 /next-bundle-optimizer 运行该技能。

该技能使你的代理能够访问 Turbopack 的模块图，以发现意外的导入关系。考虑这个尝试延迟加载重型组件的示例：

HeavyComponentLoader.js

'use client'
;
import
{ lazy }
from
'react'
;
export
const
HeavyComponentLoader
=
lazy
(()
=>
import
(
'./HeavyComponent'
));

如果 HeavyComponentLoader 是唯一导入 ./HeavyComponent 的模块，其代码将被延迟加载。然而，如果同一包中的任何其他模块静态导入 ./HeavyComponent，其代码仍会提前加载。

为了发现此类问题，该技能指导代理导出保存的 next analyze 快照为 JSON，并重建 Turbopack 的模块和块图以进行查询。使用 next analyze export 导出图数据供你自己的工具使用。

代理识别出大型的模块连接组并确定其对包的影响。它追踪它们的导入链，并使用最小割来识别可能延迟这些模块的一小部分导入边界。然后，它将建议的更改与你的源代码以及组件在应用中交互式使用的方式进行对比。

代理还可以发现并修复以下问题：

• 将逻辑移动到 React 服务器组件的机会
• 大型依赖项的重复版本
• 树摇无法应用的情况并引入未使用的代码

默认情况下，该技能报告问题和建议的修复方案。运行 /next-bundle-optimizer fix 应用建议的更改，重新运行分析，对比快照以衡量其影响。然后请你的代理为每个更改打开拉取请求。

将此标题链接复制到剪贴板：在 Vercel 上让代理投入工作

我们使用 next-bundle-optimizer 审计了 v0 的前端以及 vercel.com 的前端。代理迅速识别出在几乎所有页面上减少压缩初始 JavaScript 的机会。

在 v0 中，代理发现了：

• 一个实验性代码编辑器在几乎所有 v0 页面上被急切加载，包括实验外的用户。大多数页面节省了 150 KB。
• 应用的集中式对话框注册表急切加载了一些重型对话框组件。根据页面不同，节省了 40–650 KB。

• 一个未使用的追踪查看器组件可通过大多数路由模块访问。根据页面不同，节省了 7–61 KB。

在 vercel.com 上：

• 即使未打开代理面板，Vercel Agent 的 Markdown 渲染、语法高亮和图表绘制功能也已上线。仪表板页面节省了 255 KB。

• 一个重型自然语言日期解析库在用户与助手交互前就被提前加载。平均节省了 55 KB。

• URL 解析代码通过一个共享实用工具文件导入，而该文件还引入了整个可观测性查询引擎。部署页面节省了 125 KB。

在每种情况下，我们都会让代理创建拉取请求，验证预览部署中的修复，并上线。

总计，代理在我们应用的各页面上通过完全删除或延迟加载的方式，节省了近 2 MB 的压缩 JavaScript。

Copy link to heading Bundle analysis for humans

交互式 bundle 分析器现在新增了探索应用 bundle 的工具。要在 Next.js 应用目录中启动 bundle 分析器，请运行 next analyze。

Copy link to heading Find your largest routes

新的路由摘要首页突出显示了您最大的客户端路由，为您提供分析 bundle 大小的起点。

从那里打开一个路由，按大小排序新表格视图，找到其最大的贡献者。

/blog/[slug] · 表格

客户端

路由资源，压缩大小（预估）

来源

↕

大小

↓

@example/blog-media

2

模块

异步边界后

30.0 kB

components/code-block.tsx

初始加载

22.0 kB

components/search.tsx

初始 + 异步路径

18.0 kB

node_modules/@example/blog-markdown/parser.js

14.0 kB

lib/client-runtime.ts

12.0 kB

components/related-posts.tsx

9.0 kB

lib/table-of-contents.ts

app/blog/[slug]/page.tsx

6.0 kB

app/blog/layout.tsx

3.0 kB

总计 · 压缩（预估）

123.0 kB

按大小排序来源；展开包以检查其模块。示例博客应用。

Copy link to heading Compare bundles as your app changes

分析器现在会自动保存您运行的分析快照。通过对比它们来衡量优化的影响或调查功能或依赖项更新后的 bundle 增长。

/blog/[slug] · 对比

原始 →

优化渲染

表格

树状图

总大小

→

81.0 kB

−42.0 kB

来源

新增

0

删除

更改

6

相同

4

更改

·

全部

10

滚动表格以比较所有大小 →

原始和 Δ 之间的源更改

7.0 kB

+4.0 kB

5.0 kB

−4.0 kB

−6.0 kB

−8.0 kB

8.0 kB

−14.0 kB

4.0 kB

总计

选择已保存的构建，然后在表格或树状图中探索更改。示例博客应用。

Copy link to heading Focus on the critical render path

分析器现在会突出显示关键渲染路径上的模块，并允许您过滤掉异步依赖项，仅保留初始渲染时同步加载的代码。1

/blog/[slug] · 树状图

仅初始加载

所有路由模块

node_modules

/

player.js

20.0 kB

controls.js

10.0 kB

parser.js

组件

code-block.tsx

search.tsx

related-posts.tsx

lib

table-of-contents.ts

client-runtime.ts

app

layout.tsx

page.tsx

仅异步模块消失；具有初始路径的模块保留。示例博客应用。

了解更多关于 Next.js Bundle Analyzer 的信息，或安装优化器技能以开始使用您的代理分析应用的 bundle。

Copy link to heading Feedback and community

尝试在自己的应用上使用分析器和优化器功能，并在专用的 GitHub 讨论区分享你的反馈。你也可以在以下渠道找到我们：

• GitHub 讨论
• GitHub 问题跟踪
• Discord 社区