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.

Источник