Vue3+element plus 优化管理系统卡顿

一、问题：

近期发现侧边栏的菜单项越来越多，伴随的问题就是点击子菜单展开收起时，肉眼可见的卡顿、迟缓。

二、原因：

随着菜单项数据越来越多，使用el-icon动态加载就会造成卡顿的问题，也就是说每次动态加载都会重新渲染一遍，
那么就极大地影响网页性能，下面是el-icon的动态加载示例：
<el-icon>  
 <component :is="item?.meta?.icon"></component>  
</el-icon>

三、解决方案：

本地存svg图标，然后通过封装svg-icon组件，在需要的地方引入组件，并显示对应的图标即可，这样就很好的解决了数据过多造成的卡顿。 具体步骤：

1、安装插件：

（1）先执行这条命令 npm i fast-glob -D ； （2）再执行这条命令 npm i vite-plugin-svg-icons -D

2、创建svgIcon组件：

<template>
  <svg :class="svgClass" aria-hidden="true" :fill="iconColor">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
    import { computed } from "vue";
    const props = defineProps({
      iconClass: {
        type: String,
        required: true,
      },
      className: {
        type: String,
        default: "",
      },
      iconColor: {
        type: String,
        default: "CurrentColor",
      },
    });
    const iconName = computed(() => `#icon-${props.iconClass}`);
    const svgClass = computed(() => {
      if (props.className) {
        return "svg-icon " + props.className;
      } else {
        return "svg-icon";
      }
    });
</script>

<style scoped>
.svg-icon {
  // svg 图标默认宽高，根据个人使用情况自行调整
  width: 20px;
  height: 20px;
  fill: currentColor;
  overflow: hidden;
}
</style>

3、main.ts中全局注册

import 'virtual:svg-icons-register' 
import SvgIcon from './components/svgIcon/index.vue'

app.component('svg-icon', SvgIcon)

4、vite.config.ts配置svg图标引用路径

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    vue(),
    // 修改 svg 相关配置
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(__dirname, './src/assets/svg')],
    })],
})

5、组件使用

先在src/assets/svg下创建一些你需要的svg格式文件，再去阿里巴巴矢量图库找到对应的图标，并复制其svg代码黏贴进去即可。
<svg-icon icon-class="close" />

四、总结：类似于预加载原理，先将图片存到本地，这样直接从本地取资源即可，避免了多次网络请求。