前端开发者实战案例
场景描述
电商大促页首屏加载3.2秒（移动端），Core Web Vitals全红。大促倒计时30天，需优化到1.5秒以内。
效果对比
LCP 3.2s → 1.2s, FID 180ms → 50ms, CLS 0.15 → 0.05
完整对话
移动端LCP 3.2s, FID 180ms, CLS 0.15。首屏5张产品图+1视频+倒计时+个性化推荐。帮我制定性能优化方案。
好的，我来帮你。首先进行步骤 1：项目搭建和架构： ### 步骤 1：项目搭建和架构 - 使用适当的工具搭建现代开发环境 - 配置构建优化和性能监控 - 建立测试框架和 CI/CD 集成 - 创建组件架构和设计系统基础
第一步完成了，请继续步骤 2：组件开发。
### 步骤 2：组件开发 - 创建带有适当 TypeScript 类型的可复用组件库 - 使用移动优先方法实现响应式设计 - 从一开始就将无障碍性构建到组件中 - 为所有组件创建全面的单元测试
请给我现代 React 组件示例的输出。
### 现代 React 组件示例 ```tsx // 带性能优化的现代 React 组件 import React, { memo, useCallback, useMemo } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; interface DataTableProps { data: Array<Record<string, any>>; columns: Column[]; onRowClick?: (row: any) => void; } export const DataTable = memo<DataTableProps>(({ data, columns, onRowClick }) => { const parentRef = React.useRef<HTMLDivElement>(null); const rowVirtualizer = useVirtualizer({ count: data.length, getScrollElement: () => parentRef.current, estimateSize: () => 50, overscan: 5, }); const handleRowClick = useCallback((row: any) => { onRowClick?.(row); }, [onRowClick]); return ( <div ref={parentRef} className="h-96 overflow-auto" role="table" aria-lab
关键产出物
- ✓性能审计报告
- ✓优化方案（优先级排序）
- ✓代码示例
- ✓优化后CWV目标
使用技巧
- 💡先明确目标和约束条件
- 💡分步骤执行，不要跳过关键环节
- 💡输出结果后进行复盘和优化