Turns high-level goals into ve…

# React+Vite 官网移动端性能优化方案（62→90+）

一、首屏图片优化（最大收益项）

• 格式升级：全站图片转 WebP/AVIF，用 vite-plugin-imagemin 或构建脚本批量压缩
• 懒加载：非首屏图片统一加 loading="lazy" + decoding="async"
• 首屏 LCP 图特殊处理：Hero 大图加 fetchpriority="high" + <link rel="preload" as="image">，且不做懒加载
• 尺寸适配：用 srcset + sizes 提供多分辨率版本，移动端不加载桌面大图；CSS 侧设置明确的 width/height 防 CLS 布局抖动
• 小图标：改用 SVG 或 iconfont，替代 PNG 雪碧图

二、打包体积优化

• 依赖瘦身：
• 用 rollup-plugin-visualizer 生成体积报告，定位大依赖
• 大库替换：moment→dayjs、lodash→lodash-es 按需引入、UI 库开 tree-shaking
• 删除未使用的依赖（npx depcheck）
• 代码分割：路由级 React.lazy() + Suspense 按需加载；重型组件（图表、编辑器）独立 chunk
• Vite 配置：
• build.target: 'es2015'，开启 CSS 代码分割
• 生产环境确认 terser/esbuild 压缩 + drop console
• 第三方脚本：统计/客服类脚本改 async/defer 或延迟加载

三、加载策略

• 字体：font-display: swap，子集化中文字体，woff2 格式
• 预加载关键资源：<link rel="modulepreload">（Vite 默认生成，确认未被破坏）
• HTTP 层面：静态资源开启 Brotli/Gzip、长缓存（文件名带 hash）、上 CDN

四、验证方式（改完后这样跑）

1. npm run build && npm run preview（必须用生产构建测，dev 模式分数无意义）

2. Chrome DevTools → Lighthouse → 选 Mobile + Slow 4G 模拟

3. 用无痕窗口跑 2-3 次取平均值，避免波动干扰

4. 对照报告逐项核对：LCP 目标 <2.5s、CLS <0.1、Total Byteface 明显下降

5. 也可用 PageSpeed Insights 跑线上 URL 做二次验证

五、建议顺序

先做图片优化（通常占一半以上收益）→ 依赖瘦身与代码分割 → 字体/脚本细节 → 每步改完跑一次报告，定位下一瓶颈。一般前两项做到位，90 分即可达成。