Vue3性能优化

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

LightHouse

浏览器的调试工具中自带LightHouse性能分析。

点击“分析页面负载”生成分析报告。

指标：

FCP(First Contentful Paint)：首次内容绘制的时间，浏览器第一次绘制DOM相关的内容，也是用户第一次看到页面内容的时间。
Speed Index：页面各个可见部分的显示平均时间，当页面上存在轮播图或者需要从后端获取内容加载时，这个数据会被影响到。
LCP(Largest Contentful Paint)：最大内容绘制时间，页面最大的元素绘制完成的时间。
TTI(Time to Interactive)：从页面开始渲染到用户可以与页面进行交互的时间，内容必须渲染完毕，交互元素绑定的事件已经注册完成。
TBT(Total Blocking Time)：记录了首次内容绘制到用户可交互之间的时间，这段时间内，主进程被阻塞，会阻碍用户的交互，页面点击无反应。
CLS(Cumulative Layout Shift)：计算布局偏移值得分，会比较两次渲染帧的内容偏移情况，可能导致用户想点击A按钮，但下一帧中，A按钮被挤到旁边，导致用户实际点击了B按钮。

rollup

vite打包基于rollup，安装rollup插件：

1	pnpm add rollup-plugin-visualizer

在vite.config.ts中配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from "rollup-plugin-visualizer"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),visualizer({
    open: true
  })],
})

打包后就会呈现这样一个页面：

此处AntDesign太大了，所以可以使用按需引入优化。

Vite配置优化

build:{
  chunkSizeWarningLimit:2000,
  cssCodeSplit:true, //css 拆分
  sourcemap:false, //不生成sourcemap
  minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
  assetsInlineLimit:5000 //小于该值，图片将打包成Base64 
},

PWA离线缓存技术

安装依赖：

1	npm install vite-plugin-pwa -D

部分配置项：

VitePWA({
  workbox:{
    cacheId:"XIaoman",//缓存名称
    runtimeCaching:[
      {
        urlPattern:/.*\.js.*/, //缓存文件
        handler:"StaleWhileRevalidate", //重新验证时失效
        options:{
          cacheName:"114514.js", //缓存js，名称
          expiration:{
            maxEntries:30, //缓存文件数量，LRU算法
            maxAgeSeconds:30 * 24 * 60 * 60 //缓存有效期
          }
        }
      }
    ]
  },
})