Next.js 的 Agent 帮我删掉了 2MB 的 JavaScript,但 PR 还是得自己看
Next.js 16.4 加了一个 agent skill,可以根据 Turbopack 的模块图自动优化 bundle:导出 next analyze 快照为 JSON,重建模块和 chunk 图,找出大块相连模块,追踪 import 链,用最小割识别可以延迟加载的边界,然后对照源码检查改法是否成立。它还能发现把逻辑移到 React Server Components 的机会、重复依赖版本、以及 tree shaking 失效导致引入未使用代码的情况。
Vercel 自己用它跑了 v0 和 vercel.com,结果是总共省掉了接近 2MB 压缩后的 JavaScript,要么彻底删除,要么延迟到需要时再加载。几个具体案例:v0 里一个实验性代码编辑器在几乎所有页面上被急切加载,包括不在实验里的用户,省了 150KB;一个 dialog registry 急切加载了重型组件,省 40–650KB;vercel.com 的 dashboard 上,markdown 渲染、语法高亮和图表绘制即使 Agent 面板没打开也被打进了包,省 255KB;一个重型自然语言日期解析库在用户交互前就被加载,省 55KB。
流程是:agent 报告问题和建议修复,运行 /next-bundle-optimizer fix 应用改动、重跑分析、对比快照,然后让 agent 为每个改动开一个 PR。Vercel 的做法是每个 PR 都在 preview deployment 上验证过再合入。
我自己跑下来的感受是:这个工具最强的部分不是“自动改”,而是“把模块图变成可查询的数据”。以前 bundle 分析器给你一张图,你得自己看;现在 agent 能沿着 import 链去问“如果我延迟这个模块,哪些页面会少加载什么、哪些页面仍然会静态加载它”。但 PR 仍然需要人看,因为“延迟加载”和“交互时再加载”之间的取舍,取决于产品对首屏之后多久需要那个功能的判断,模型不知道你的用户会多快点到那个按钮。
- 点赞
- 收藏
- 关注作者
评论(0)