相关实践
用 Next.js Lazy Loading 把重组件延后到用户真正需要时加载
Next.js lazy loading 文档适合处理首屏 JavaScript 过重的问题。输入是一个包含图表、编辑器、弹窗或低频组件的 Next.js 页面。执行过程是识别非首屏必需模块，用 dynamic import 或 React lazy 拆分客户端组件，并确认 SSR、loading 状态和交互时机符合预期。产物是一份减少初始 bundle 的懒加载改造记录。验证来自 Next.js 官方文档对 dynamic imports、client components 和 lazy loading 的说明。
用 Lighthouse 把页面体验问题拆成性能、可访问性和 SEO 验收项
Chrome Lighthouse overview 适合把页面质量检查从主观感受转成可量化报告。输入是一个待上线或待优化的页面 URL。执行过程是运行 Lighthouse，分别查看 Performance、Accessibility、Best Practices 和 SEO 分类；把失败项转成修复任务，再复测分数和关键诊断。产物是一份有分数、有证据、有复测结果的页面质量验收报告。验证来自 Chrome 官方文档对 Lighthouse 审计类别、报告和使用方式的说明。
介绍一个新的VSCode插件Skills
VSCode新插件Skills上线！一键调用react-best-practices技能包，让AI智能审查代码性能，自动优化React应用。告别手动排查，提升开发效率，快来体验智能编程新时代！
年薪百万的 React 功底怎么装进AI？Vercel 的这个 Skill 给了标准答案
Vercel 推出 React 最佳实践 Skill，让 AI Agent 化身资深 React 专家！年薪百万的 React 功底一键注入，智能指导代码编写，帮你轻松掌握高级技巧，提升开发效率与代码质量。
React 性能优化实测：Agent Skills 到底值不值得装？
想知道 AI 审查 React 代码，到底靠不靠谱吗？ 本篇实测对比了禁用 vs 启用 Agent Skills 的效果，让你直观看到 10,000 次冗余循环被抓出，性能提升量化可查！ 学习如何用 Vercel 官方推荐的 40+ 条最佳实践，快速优化组件性能，AI 不再只会“提示”，还能帮你落地改造！
使用 Vercel 的最佳实践 Agent Skill 为 Claude Code、Codex 和 OpenCode 提升 React 性能
还在靠经验“手搓” React 性能优化？ Vercel 推出的 Agent Skill 直接把 45 条专家级最佳实践塞进 Claude Code，让 AI 自动揪出瀑布流、包体积、重渲染等致命问题。 一行命令安装，把性能审查、重构、CI 全部自动化，真正做到性能问题不过夜。