性能优化概括

开发层面：代码优化（逻辑(长任务拆离、任务切片)、副作用/定时器/事件监听清除）、css动画（GPU加速：transform、opacity）、排查升级第三方库尽量采取新版本按需引入（去除不必要的第三方库）、优化图片/字体（格式、压缩、CDN加速、懒加载）、组件按需加载/懒加载、移除大体积的base64、利用缓存、减少网络请求数量。 构建打包：接口/配置预加载、屏幕快照、骨架屏loading图、静态资源压缩、分包、cdn加载、 tree-shaking等。

评估性能，团队性能指标 （主导、推进、负责）分析性能问题，做出对应性能问题的解决方案，实施性能优化，建立完整指标体系并做好性能监控，持续化。

• 开发时的构建速度优化：npm run dev 的一瞬间到呈现结果要占用多少时长
• 页面性能指标
• 开发层面具体优化细节：
  • 优化图片： webp 格式，图片压缩，图片尺寸（在头像上传控制 size）
  • 组件按需加载：React：Suspense、React.lazy
  • 要注意副作用的清除
  • 懒加载：数据懒加载、图片懒加载
  • tree-shaking：打包工具自带（条件：esm，并且按需导入才行）
  • cdn：oss + cdn
  • 精简三方库：
    • 库内容支持按需导入 babel-plugin-import
    • 国际化文件，要移除
  • 减少网络请求次数：使用缓存、合并请求等方法减少网络请求次数。
  • 缓存
  • 字体压缩：font-spider 移除无用字体，webfont 处理字体加载
  • SSR、SSG：服务端渲染、静态站点生成
• 打包构建优化（优化体积）：vite（rollup）、webpack
  • 静态资源压缩(terser)
  • 分包：将应用程序拆分为多个包，以实现按需加载。这减小了初始加载时间，并减少了首次加载时需要下载的数据量。
  • 动态导入（路由懒加载）
  • cdn加载
  • gzip压缩：需要后端设置响应头：content encoding --> gzip
  • tree-shaking
• 其他优化方案：service worker
• SSR：终极方案