性能优化概括

• 页面性能指标
• 开发层面具体优化细节：
  • 懒加载：数据懒加载、图片懒加载
  • 优化图片：不要用太大的图片，精灵图或 webp 格式
  • 路由懒加载(组件按需加载)：React：Suspense、React.lazy
  • 减少网络请求次数：使用缓存、合并请求等方法减少网络请求次数
• 打包构建优化（优化体积）：vite（rollup）、webpack
  • 静态资源压缩(terser)
  • 分包：将应用程序拆分为多个包，以实现按需加载。
  • cdn 加载
  • gzip 压缩：需要后端设置响应头：content encoding --> gzip

    gzip 压缩前端打包做压缩，只是交给服务器 nginx 不会再一次压缩，正常来说可以直接将打包好的文件给服务器，nginx 开启 gzip 压缩后，在请求的时候会自动压缩的

  • tree-shaking：打包工具自带（条件：esm，并且按需导入才行）
  • http2（开启后不需要精灵图了）