Why @next/bundle-analyzer wasn’t enough for our team (So we built an automated PR bot)

说明与用途

自动化 GitHub 机器人检查 PR 中的包大小并警告回归，消除了手动 @next/bundle-analyzer 分析。

问题

Manual bundle analysis with @next/bundle-analyzer is too laborious for fast‑moving teams, leading to unnoticed bundle regressions.

结果

Automated PR bot reduced bundle regression incidents by eliminating manual checks and providing instant feedback within PRs.

工作流

• 1. Vercel preview deployment triggers webhook on success.
• 2. Webhook payload is intercepted by NextPerf.
• 3. NextPerf retrieves production baseline JS size from edge storage.
• 4. It calculates PR JS size and difference.
• 5. If difference exceeds threshold defined in .nextperf.json, NextPerf posts a markdown table with Base Branch, This PR, and Difference metrics and a warning message.
• 6. Developers review the comment and address regressions before merging.

证据

To check your bundle size, a developer has to: 1. Remember to run a local build with an env flag (ANALYZE=true npm run build). 2. Wait for Webpack/Turbopack to finish compiling. 3. Open a massive, interactive HTML treemap in their browser. 4. Go hunting through nested colored boxes to figure out which file grew.

来源

We wanted it to live right where code reviews happen: GitHub Pull Requests.

来源

Now, whenever someone opens a PR on our repo, a clean little summary drops in automatically: ...

来源

Tools like @next/bundle-analyzer are fantastic for deep-dive optimization sessions when you're actively trying to trim fat off your app. But for everyday development, automation is the only way to prevent regressions permanently.

来源