Vue3+vite 加载优化

公司项目，技术栈：vue3+vite+elementPLus+echarts。首屏加载有点慢，针对这个做了一些优化措施，记录一下。之前写过关于vue2版本的优化，有兴趣的可以了解下

定位问题

f12打开控制台，然后Network看下那些包占比大。这个项目是：字体包>背景图>js主包。简单看了之后开始进行优化

1、字体处理

字体处理，如果对于系统优化要求不严格，可以在@font-face引用时，设置font-display

@font-face {font-family: "Source Han Sans CN";src: url("@/assets/fonts/SourceHanSansCN-Regular.otf");font-display: swap;
}

gpt解释：
在这里插入图片描述
如果是静态网站，并且对于系统优化要求严格，可以尝试借助类似glyphhanger之类的工具，对字体文件进行删减。只保留项目使用到的字体。

2、图片优化

首选肯定本地图片调整为cdn方式加载，但是对于没有cdn的项目就需要静态处理了
小图片，vite其实已经内置了对于小图片的处理

较小的资源体积小于 assetsInlineLimit 选项值则会被内联为 base64 data URL。
大图片，推荐一个无损压缩网站,基本大的图片，在网站上过滤一边，能减少20-50%的体积.

3、js主包优化

主包这里的优化，需要明确具体是那些模块大，我这里是使用插件（rollup-plugin-visualizer）分析，类似webpack的插件：webpack-bundle-analyze

// vite.config.ts
import { visualizer } from "rollup-plugin-visualizer"export default ({ command, mode }: ConfigEnv): UserConfigExport => {...plugins:[visualizer({gzipSize: true,brotliSize: true,filename: "stats.html", // 默认在项目根目录下生成stats.html文件，可自定义open: true //生成后自动打开浏览器查看}),]
}

然后执行build命令，打包完成就会直接打开页面分析内容。我这里没记录最开始的分析记录图，就不展示了。然后按照从大到小进行优化。我这边主要是几个三方包的优化

echarts、vue-echarts
echarts的包，基本是No.1,1M+的占用，异常恐怖。所以是头号优化目标，方法也比较简单，参考echarts官方文档,将全量引入修改为按需引入即可

import { type App } from "vue"
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import { PieChart, LineChart, BarChart, MapChart, GaugeChart } from "echarts/charts"
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, GeoComponent } from "echarts/components"
import VChart from "vue-echarts"// 按需引入echarts 和 vue-charts
export function loadCharts(app: App) {use([CanvasRenderer,PieChart,MapChart,GaugeChart,LineChart,BarChart,TitleComponent,TooltipComponent,LegendComponent,GridComponent,GeoComponent])app.component("v-chart", VChart)
}

注意，内部使用到的渐变色，也要调整为按需引入，此处让我疑惑了很久

// 旧
import * as echarts from "echarts"options = {...color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#00FFE0',},{offset: 1,color: '#ab4141',},]);
}
// 新
import { graphic } from "echarts/core"options = {...color: new graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#00FFE0',},{offset: 1,color: '#ab4141',},]);
}

elementPlus、@element-plus/icons-vue

elementPlus的按需导入比较简单，官网已经有了示例，直接照抄就行，

@element-plus/icons-vue的按需导入，只要不是官网的这种全量导入就行，用到那些引入哪些

// main.ts
// 这个方式会导致 icon全量注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// 用到哪个导入哪个
import {Plus} from '@element-plus/icons-vue'<template><Plus />
</template>