Vue学习记录之二十四 页面性能分析

一、使用google工具Lighthouse

Lighthouse 一个开源的自动化网站质量评估工具

可以选择移动设备或者桌面设备进行分析：

二、使用rollup-plugin

npm install rollup-plugin-visualizer

然后在vite.config.ts中进行配置， 然后开始打包

会自动跳出一个页面，来分析各部分代码所在比例，可以根据分析结果进行优化。

三、vite配置来优化

build:{
    
    
      chunkSizeWarningLimit:2000,  //打包的是超过2000kb进行提示
      cssCodeSplit:true,  //是否允许css拆分
      sourcemap: false,  //不生成sourcemap,生成环境不需要
      minify:'terser',  //是否禁用最小化混淆(可选两个值)，esbuild打包速度最快，terser打包体积最小
      assetsInlineLimit:5000, //小于该值的图片将打包成Base64
    }

四、vite插件pwa来优化

如： 使用pwa实现离线缓存技术

pnpm install vite-plugin-pwa

安装完了，进行配置。他的功能很强大，可以让项目无限接近Native应用
1.可以添加到主屏幕，利用manifest实现
2.可以实现离线缓存，利用service worker实现
3.可以发送通知，利用service worker实现
下面是一小部分配置：

plugins: [
      vue(),
      vueJsx(),
      //visualizer({open:true}),
      VitePWA({
    
    
        //它的配置有很多，感兴趣的可以单独去查阅下。
        workbox:{
    
    
          cacheId:"lmb", //缓存名称
          runtimeCaching:[
            {
    
    
              urlPattern: /.*\.js.*/, //缓存js文件，也可以缓存配置css,图片等。
              handler:'StaleWhileRevalidate', //重新验证时失效
              options:{
    
    
                cacheName: "lmb-js", //缓存js名称
                expiration:{
    
    
                  maxEntries:30, //缓存文件数量 LRU算法
                  maxAgeSeconds:30*24*60*60 //缓存有效期
                }
              }
            }
          ]
        }
      })
    ],

五、图片懒加载

import lazyPlugin from ‘vue3-lazy’

使用

<img v-lazy="user.avatar">

六、虚拟列表

可以直接使用element-plus 中自带的virtualized Table 虚拟化表格。在可视化区域展示dom, 其他的删除掉了。

七、多线程(使用 new Worker创建)

VueUse 库已集成了webWorker

//worker脚本与主进程必须遵守同源限制。
//路径协议，域名，端口号三者需要相同。
const myWorker1 = new Worker('./calBox.js');
//都使用postMessage 发送信息
worker.postMessage(arrayBuffer,[arrayBuffer]);
//都使用onmessage接收信息
self.onmessage = function(a){
    
    
	// xxx这里worker脚本的内容
}
//关闭
worker.terminate();