前端卓越指南

解决什么问题

React 应用上线后常见的性能问题，往往不是某一行代码写错了，而是默认客户端渲染把太多逻辑推到了浏览器。首屏要等待 JS 下载、解析、执行后才能看到内容，图片没有尺寸信息导致布局跳动，第三方库把整页打包体积撑大，moment 之类的重型依赖悄悄进入产物。这些问题在开发环境里不明显，却会直接体现在 LCP、INP、CLS 等真实用户指标上。

技能如何工作

这个技能提供一套围绕 React Server Components 与 Next.js App Router 的优化清单，核心是把工作尽量放到服务端，把交互边界收得更小。

服务端组件

• 直接访问数据库、文件系统和内部 API，不把这些能力暴露给浏览器
• 不能使用 useState、useEffect 或浏览器 API
• 交互组件在文件顶部标记 'use client'
• 从服务端组件向客户端组件只传可序列化的 props，不传函数或类
• 尽量让 'use client' 边界靠近交互子树

流式渲染与代码分割

每个 Suspense 边界独立流式输出，围绕数据获取组件放置边界，避免一个慢查询阻塞整页。按路由边界、条件渲染组件、重型库和首屏以下内容做分割。

打包体积优化

• 运行 npx next build 检查各路由产物大小
• 使用 @next/bundle-analyzer 定位大依赖
• 用 date-fns 或 dayjs 替代 moment
• 按需导入，例如 import { debounce } from 'lodash-es/debounce'
• 动画优先用 CSS，图标库只引入需要的图标

Core Web Vitals

目标值为 LCP 不超过 2.5s、INP 不超过 200ms、CLS 不超过 0.1。首屏图片加 priority，预加载 hero 图，内联关键 CSS，并为图片设置显式宽高。next/image 负责自适应格式与 srcset，非首屏图片默认懒加载。字体通过 next/font 自托管并自动子集化，display: 'swap' 避免隐形文本，最多保留两个字族。

适用边界

这份清单以 React 和 Next.js 为主要假设，其他框架需要自行映射到等价能力。Core Web Vitals 数值来自资料中的参考表，不同业务形态的合理目标会有差异。最终要以真实用户监控数据为准，而不只是实验室分数。