Vue的性能优化

# Vue3 的性能优化应从哪几个方面展开？

# 1.打包构建（webpack、vite）

• 产物：
  • terser、uglify(压缩、丑化)
  • chunk
  • tree-shaking
  • turborepo、nx(构建缓存)
• 开发时：
  • MFSU（Umi4：基于webpack的构建提速）
  • happypack（多线程打包）
  • dll、cache

# 2.应用层面

• 懒加载
• 合理设计组件的颗粒度（Page => PageHeader、PageContent、PageFooter）
• 细颗粒度更新（Pinia,订阅的对象尽量修改到最小）

  let arrs = [{name: 'b1'}, {name: 'b22'}, {name: 'b3'}]
  // 因为 b1、b3 没变
  
• transform减少重排，完成动画
• 接口请求缓存
• 虚拟列表、表格
• 性能优化（v-once、Keep-Alive）
• Web Worker 用于耗时计算

const num = 10_00000
for (let i = 0; i < num; i++) {
    // 理解为耗时计算
}

# 3.资源加载

• 压缩，gzip
• 字体文件压缩，（静态网站就用font-spider提取使用到的文字）
• oss、cdn
• http1.2（http1 和 2 的区别？）
  • 相对于HTTP1.0，HTTP1.1的优化
  • 相对于HTTP1.1，HTTP2的优化

# 4.缓存

• 强缓存（Cache-Control、Expire）
• 协商缓存（Last-Modified、Etag，If-Modified-Since、If-None-Match）
• 策略缓存（service-worker）

# 5.首屏加载

• SSR（Nuxt-vue、Next-react）
• prefetch（node 层，首屏预加载 ）