Vue3+vite 加载优化

最新推荐文章于 2026-03-30 18:30:26 发布

原创最新推荐文章于 2026-03-30 18:30:26 发布 · 2.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

双下巴大圆脸

关注

标签

#Vue3+vite #echarts按需加载 #elementPlus按需加载

分类前端开发

公司项目，技术栈：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>