最近给自己的 Next.js 小项目做性能优化，接入浏览器 MCP 后，让 Codex 直接操作浏览器并读取 Lighthouse 、Performance 、Console 、Network 和 DOM 。
大致流程是：
- 先让 Codex 只跑 Lighthouse ，保存基线，不修改代码；
- 根据 TBT 和 Performance trace 找 long task ；
- 对比服务端 HTML 和 hydration 后的 DOM ；
- 追踪到具体源码和业务函数；
- 确认原因后，再让 Codex 分阶段修改；
- 每一步都重新跑测试、检查 Console 和 Lighthouse 。
我使用的 Prompt 大致是：
请使用浏览器 MCP 和 Lighthouse 分析当前网站。
先不要修改代码，保存 JSON 基线，记录 FCP 、LCP 、TBT 、TTI 、CLS 、
long task 、资源大小，并检查 Console 、Network 和 hydration 错误。
请把结果整理为：
现象 -> 证据 -> 假设 -> 验证方法。
不要把 Lighthouse 的通用建议直接当成根因。
最后发现主要问题是服务端缓存的游戏数据和客户端首次生成的数据不一致，导致 hydration 失败，页面上的 170 个格子被重新渲染。
优化后本地 production build 的结果：
- Lighthouse：79 → 98
- TBT：828.5 ms → 49 ms
- 传输体积：474 KiB → 185 KiB
相关地址
- 游戏的玩法： https://medium.com/@winterscott999/fruit-box-a-practical-analysis-of-the-sum-10-puzzle-303ee5aa60d8
- 油管视频： https://www.youtube.com/watch?v=PZWcNUkTEqo
- 油管视频： https://www.youtube.com/watch?v=MOzWeH3XnWA
- 在线游戏： https://fruitboxgame.com/
- 开源代码： https://github.com/weizixiao/fruit-box-game
- itch 地址： https://weizixiao.itch.io/fruit-box-game
Select Language