性能优化

上次更新 2024年12月25日星期三 6:29:43 字数 0 字 时长 0 分钟

写在前面

性能优化 主要涉及真实场景 根据自身（项目）需求 进行优化

为什么需要性能优化

• 提升用户体验
• 提升页面加载速度
• 提升页面渲染速度
• 提升页面交互速度

针对一个项目 做性能分析

• 使用 lighthouse 进行性能分析 使用 Lighthouse 进行性能分析
• 使用 devtool performance 进行性能分析 使用 DevTools 进行性能分析
• 使用 web-vitals 进行性能分析 使用 Web Vitals 进行性能分析

影响性能的因素的外化表现

• FCP^[1] 首次内容绘制

优化方向

• 优化网络请求
• 优化资源加载
• 优化代码执行
• 优化页面渲染

优化工具

• lighthouse
• web-vitals
• devtool performance

优化方法

• 优化网络请求

  • 使用 CDN
  • 使用 HTTP/2
  • 使用 HTTP/3
  • 使用 service worker
  • 使用缓存
  • 使用压缩
  • 使用预加载 👀 Vite 性能优化

• 减少猜测解析路径（resolve.extensions） 隐式导入越多，解析并找到目标文件越慢

• 避免出现桶文件^[2]

图片优化

• 图片懒加载
• 图片压缩 图片格式转换 @vheemstra/vite-plugin-imagemin

代码优化

• 代码分割 按需引入
• 路由懒加载
• 组件按需引入 异步组件
• 组件库按需引入

网络优化

• 合理分包 减少首页的 css 和 js 的加载量
• 推迟显示屏幕外的图片

echarts

按需引入 只引入需要的模块 不全量加载 echarts

注解

---

1. FCP 首次内容渲染（FCP）衡量从用户导航到页面开始到页面内容渲染完成的时间。对于此指标，"内容"是指文本、图片（包括背景图片）、非白色的<svg>、非零大小的<canvas>元素。FCP 首次内容渲染 ↩︎

2. 桶文件：文件名相同，但内容不同的文件vite void-barrel-files ↩︎