📘 企业级前端性能优化方案

Version：v1.0
适用范围：Web 前端项目（React / Vue / Webpack / Vite）
目标：系统化提升 Web 应用的加载速度、渲染性能、弱网体验与稳定性

---

目录

1. 总体目标与关键指标

2. 性能优化原则

3. 构建与打包优化

4. 网络传输与资源加载优化

5. 渲染性能优化（React/Vue）

6. 图片与多媒体优化

7. 数据加载与弱网优化

8. 长列表与大数据渲染优化

9. 动画与交互性能优化

10. 缓存策略（HTTP / Storage）

11. 监控与性能分析体系

12. 安全与兼容性注意事项

---

1. 总体目标与关键指标

1.1 性能目标

统一规定项目性能 baseline：

指标	目标值（PC）	目标值（移动端）
首屏可交互时间（TTI）	≤ 3s	≤ 4.5s
Largest Contentful Paint (LCP)	≤ 2.5s	≤ 3s
Total Blocking Time (TBT)	≤ 200ms	≤ 200ms
首屏资源体积（JS/CSS）	≤ 300 KB	≤ 250 KB

1.2 优化优先级

1. 降低首屏 JavaScript 体积

2. 减少网络请求数量

3. 提升渲染效率及减少重绘

4. 增强弱网与低端设备体验

---

2. 性能优化原则

• 按需加载：不加载用户当前不需要的资源

• 最小可用原则：首屏只加载核心内容

• 缓存优先原则：将所有不常变数据缓存到本地

• 异步优先原则：延迟加载非关键资源

• 组件最小重渲染：减少渲染深度与频度

---

3. 构建与打包优化（Webpack / Vite）

3.1 代码分割（Code Splitting）

• 路由级懒加载（import()）

• 组件级懒加载

• 库级拆分：React / Vue / lodash / antd 单独成 chunk

3.2 Tree Shaking

• 使用 ES Module

• 删除无用代码

• 禁用大而全的库（moment、lodash 未按需引入）

3.3 构建优化

• Vite 使用 esbuild 压缩

• Webpack 使用 Terser + CSS Minimize

• 打包产物分析（Bundle Analyzer）

• 移除 source map（生产环境）

• 对图标使用 iconfont、SVG sprite，而非大量 PNG

3.4 Polyfill 体积优化

• 使用 @babel/preset-env + useBuiltIns: 'usage'

• 导入浏览器特性最低必要的 polyfill

---

4. 网络传输与资源加载优化

4.1 HTTP 压缩

• Gzip / Brotli

• 图片压缩（20%—80% 减少）

4.2 减少请求数量

• 合并 CSS / JS

• 使用 HTTP/2

• 图标使用 SVG Sprite 替代大量图片请求

4.3 资源优先级控制

• <link rel="preload"> 关键 JS/CSS

• <link rel="prefetch"> 未来可能用的资源

• DNS-prefetch、preconnect 提前建立网络链路

---

5. 渲染性能优化（React/Vue）

5.1 React 渲染优化

• 使用 React.memo 避免子组件重复渲染

• 使用 useMemo、useCallback 缓存引用

• 使用 key 减少 diff 成本

• 避免在 render 中创建对象/函数

• Context 拆分，避免大 context 引发全组件树更新

5.2 Vue 渲染优化

• 使用 v-once 避免不变内容的复渲染

• 使用 computed 缓存复杂计算

• 避免深层次对象导致响应式频繁触发

• 使用异步组件（defineAsyncComponent）

5.3 DOM 回流与重绘优化

• 批量 DOM 操作（classList 一次性修改）

• 使用 transform 和 opacity 做动画

• 避免频繁读取 offset/scroll 导致强制布局

---

6. 图片与多媒体优化

6.1 图片格式优化

• webp / avif 优先，否则 jpg/png

• 小图标使用 SVG

• 使用 tinypng 压缩大图

6.2 图片加载优化

• 懒加载（loading="lazy"）

• 响应式图片（srcset）

• 骨架屏占位，减少布局跳动（CLS）

---

7. 数据加载与弱网优化

7.1 数据策略

• 避免首屏多请求

• 优先并行加载

• 分块加载大数据，如分页 / 虚拟列表

• 使用 HTTP 缓存替代重复请求

7.2 弱网环境优化

• 请求自动重试机制（含指数退避）

• 重要接口超时处理（如 5 秒）

• 失败兜底 UI（空态、提示）

• 预加载关键资源，减少 RTT

---

8. 长列表与大数据渲染优化

8.1 虚拟列表

• React：react-window、react-virtualized

• Vue：vue-virtual-scroll-list

8.2 大数据分片渲染

• 使用 requestIdleCallback

• 使用 requestAnimationFrame

---

9. 动画与交互性能优化

9.1 动画原则

• 只使用 transform、opacity

• 避免引起 layout 的动画（width/height/top）

9.2 高性能动画

• CSS transition / animation

• GPU 加速（translateZ、translate3d）

---

10. 缓存策略（HTTP / Storage）

10.1 HTTP 缓存

• 强缓存：max-age、ETag

• Vite/Webpack 构建资源默认为 hash 文件名，可强缓存 1 年

• 不变资源走 CDN

10.2 Storage 缓存数据

• localStorage（配置、用户信息、静态字典）

• IndexedDB（大数据缓存如离线表单）

• 使用 sw-toolbox / Workbox 构建 Service Worker 缓存

---

11. 监控与性能分析体系

11.1 性能监控

采集数据指标：

• FCP

• LCP

• TTFB

• TTI

• CLS

• JS 错误

• 资源加载失败

工具：

• Sentry

• Web Vitals SDK

• performance API（自研也可）

11.2 打包分析

• SourceMap 在生产环境关闭

• 使用 Bundle Analyzer 看 bundle 体积

• 找出最大包、优化分包策略

---

12. 安全与兼容性注意事项

• 禁用过期 API

• 低版本浏览器检测 + 优雅降级

• CSP 限制外部资源

• HTTPS 强制

• Polyfill 仅按需加载

---

📌 附录：项目上线前性能优化 CHECKLIST

A. 构建层

• 使用 code splitting

• Tree shaking 开启

• 删除未使用库（moment、lodash 全量）

• 静态资源是否 hash 化

B. 网络层

• 图片是否为 webp

• 是否配置 gzip/brotli

• preload/prefetch 是否使用

C. 渲染层

• React.memo / useMemo 是否正确使用

• 是否减少无意义 re-render

• 动画仅使用 transform/opacity

D. 产品层

• 骨架屏是否设置

• 列表是否虚拟化

• 弱网是否有兜底方案