性能优化概括

• 页面性能指标
• 开发层面具体优化细节：
  • 优化图片：推荐 webp 格式，不要用太大的图片，精灵图
  • 组件按需加载：React：Suspense、React.lazy
  • 要注意副作用的清除
  • 懒加载：数据懒加载、图片懒加载
  • cdn：oss + cdn
  • 精简三方库：
    • 库内容支持按需导入 babel-plugin-import
    • 国际化文件，要移除
  • 减少网络请求次数：使用缓存、合并请求等方法减少网络请求次数。
  • 缓存
  • 字体压缩：font-spider 移除无用字体，webfont 处理字体加载
• 打包构建优化（优化体积）：vite（rollup）、webpack
  • 静态资源压缩(terser)
  • 分包：将应用程序拆分为多个包，以实现按需加载。这减小了初始加载时间，并减少了首次加载时需要下载的数据量。
  • 动态导入（路由懒加载）
  • cdn加载
  • gzip压缩：需要后端设置响应头：content encoding --> gzip
  • tree-shaking：打包工具自带（条件：esm，并且按需导入才行）