# 表演技巧 ## 绩效目标 **前端（Web Vitals）：** LCP < 2.5s，FID < 100ms，CLS < 0.1，FCP < 1.8s，TTFB < 600ms **后端：** 响应时间 < 500ms (p95)，冷启动 < 2s，错误率 < 1% **数据库：** 查询时间 < 100ms，缓存命中率 > 80% ## 衡量绩效 # 灯塔审核 npx 灯塔 https://sgcarstrends.com --view # 捆绑分析 cd apps/web && ANALYZE=true pnpm build # 使用 k6 进行负载测试 k6 运行 --vus 100 --duration 5m load-test.js ## 捆绑包大小优化 ### 动态导入 // ❌ 静态导入（立即加载）从“./heavy-component”导入{HeavyComponent}； // ✅ 动态导入（延迟加载）从“next/dynamic”导入动态； const HeavyComponent = 动态(() => import("./heavy-component"), { 正在加载：() =>

正在加载...

, SSR：假， }); ### 摇树 // ❌ 导入整个库从“lodash”导入_； // ✅ 仅导入您需要的内容从“lodash/uniq”导入uniq； ## 反应性能 ### 防止重新渲染 // useMemo 进行昂贵的计算 const 已处理 = useMemo(() => 昂贵的操作(数据), [数据]); // useCallback 用于稳定函数引用 const handleClick = useCallback(() => doSomething(), []); // 纯组件的 React.memo const Child = React.memo(function Child({ name }) { 返回

{name}

; }); ### 虚拟化长列表从“react-window”导入{FixedSizeList}； {({ 索引, 样式 }) => <项目样式={样式} 数据={项目[索引]} />} ## 数据库查询优化 ### 添加索引 // 包/数据库/src/schema/cars.ts 导出常量汽车 = pgTable("汽车", { 制作：文本（“制作”）.notNull（），月份：文本（“月份”）.notNull（）， }, (表) => ({ makeIdx：索引（“cars_make_idx”）.on（table.make）， })); ### 避免 N+1 查询 // ❌N+1 次查询 for (const post of posts) { post.author =等待db.query.users.findFirst({ 其中：eq(users.id, post.authorId) }); } // ✅ 带关系的单个查询 const posts =等待db.query.posts.findMany({with:{author:true}}); ### 仅选择需要的列 // ❌ 选择所有列 const users = wait db.query.users.findMany(); // ✅ 选择特定列 const users = wait db.select({ id: users.id, name: users.name }).from(users); ### 使用分页 const cars = 等待 db.query.cars.findMany({ 限制：20，偏移量：（页 - 1）* 20， }); ## 缓存 ### Redis 缓存从“@sgcarstrends/utils”导入{redis}；导出异步函数 getCarsWithCache(make: string) { const cacheKey = `汽车：${make}`; const 缓存 = 等待 redis.get(cacheKey); if (缓存) 返回 JSON.parse(缓存为字符串); const cars = wait db.query.cars.findMany({ 其中：eq(cars.make, make) }); 等待 redis.set(cacheKey, JSON.stringify(cars), { ex: 3600 }); 还车； } ### Next.js 缓存 // 每小时重新验证一次导出常量重新验证= 3600； // 或者使用带缓存的 fetch const data = wait fetch(url, { next: { revalidate: 3600 } }); ## 图像优化从“下一个/图像”导入图像； // ✅ 优化图像，优先显示上折 <图片 src="/英雄.jpg" alt=“英雄” 填充尺寸=“（最大宽度：768px）100vw，50vw” 优先级 /> ## Vercel 函数优化 // 具有优化配置的 API 路由导出常量配置= { maxDuration: 60, // 秒 }; // 对低延迟端点使用边缘函数导出常量运行时=“边缘”； ## 分析 ### 性能中间件 // 应用程序/api/src/middleware/performance.ts 导出 const PerformanceMiddleware = async (c: Context, next: Next) => { const start = Performance.now(); 等待下一个（）； const 持续时间 = Performance.now() - 开始； c.header("X-Response-Time", `${Math.round(duration)}ms`); 如果（持续时间 > 1000）{ log.warn("请求缓慢", { path: c.req.path,uration: Math.round(duration) }); } }; ### 查询分析 const start = Performance.now(); const 结果 = 等待 db.query.cars.findMany(); const 持续时间 = Performance.now() - 开始；如果（持续时间 > 100）{ console.warn(`查询速度慢：${duration}ms`); } ### Vercel 分析检查 Vercel 仪表板 → 分析： * 函数执行次数 * 边缘响应时间 * 网络生命指标 * 请求量和错误 ## 负载测试 // 加载-test.js (k6) 从“k6/http”导入http；从“k6”导入{检查}；导出常量选项= { 阶段：[ { 持续时间：“2m”，目标：100 }， { 持续时间：“5m”，目标：100 }， { 持续时间：“2m”，目标：0 }， ], 阈值：{ http_req_duration: ["p(95)<500"], http_req_failed：[“速率<0.01”]， }, }; 导出默认函数() { const res = http.get("https://api.sgcarstrends.com/api/v1/cars/makes"); check(res, { "状态 200": (r) => r.status === 200 }); } ## 绩效检查表 * 捆绑包大小 < 200KB（初始加载） * LCP < 2.5s，FID < 100ms，CLS < 0.1 * API 响应 < 500 毫秒 * 数据库查询<100ms * 图像优化（WebP/AVIF） * 实现代码分割 * 缓存策略到位 * 长列表虚拟化 * 启用压缩 ## 快速获胜 1. **压缩** ：启用 gzip/brotli （大小减少 60-80%） 2. **图像优化**：使用Next.js图像组件 3. **缓存** ：在Redis中缓存昂贵的操作 4. **索引** ：为经常查询的列添加索引 5. **代码分割**：延迟加载重型组件 6. **Memoization** ：使用 useMemo/useCallback 进行昂贵的操作 ## 参考文献 * 网络生命体： * Next.js 性能： * k6 负载测试：

表现

包含技能