Vue3高级性能优化

下载相关插件

声明：本文为个人学习文章：来源：小满zs

npm install rollup-plugin-visualizer

减小打包体积

执行npm run build后会自动打开该网址

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import {visualizer} from "rollup-plugin-visualizer";
//vite版本
// https://vitejs.dev/config/
export default ({mode}:any) => {
  return defineConfig({
    plugins: [vue(),AutoImport({
      imports:['vue'],//vue注入
      dts:'src/auto-import.d.ts'//生成声明文件
    }),visualizer({open:true})],//必须配置open
    build:{
      chunkSizeWarningLimit:2000,//超过2000提示
      cssCodeSplit:true,//css拆分
      sourcemap:false, //不生成sourcemap
      minify:'terser',//是否禁用最小化混淆，esbuild打包最快，terser打包体积最小
      assetsInlineLimit:5000//小于该值，图片将打包成base64
    }
  })
}

其他性能优化相关

插件下载（离线缓存）

PWA离线存储技术

npm install vite-plugin-pwa

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

                }
              }
            }
          ]
      },
    })

PWA技术让web网页无限接近于Native应用

• 1.可以添加到主屏幕，利用manifest
• 2.可以实现离线缓存，利用service worker实现
• 3.可以发送通知，利用service worker 实现

可以自己去专门学习

图片懒加载

npm install vue3-lazy

import lazyPlugin from 'vue3-lazy'

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

虚拟化表格

当后端传入超过一千条数据后，前端展示压力很大，可以使用虚拟表格进行展示，在element-plus中有封装好的列表

多线程 使用 new Worker 创建

• worker脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相同

const myWorker1 = new Worker("./calcBox.js");

都使用postMessage发送消息

worker.postMessage(arrayBuffer, [arrayBuffer]);

都使用onmessage接收消息

self.onmessage = function (e) {
 // xxx这里是worker脚本的内容
};

关闭

worker.terminate();    

VUE use 已经集成