yarn add rollup-plugin-visualizer

vite.config.js里配置

    plugins: [copy({targets: [{ src: 'node_modules/echarts/dist/component/echarts.min.js', dest: 'public/js' }]}),visualizer({// 打包完成后自动打开浏览器，显示产物体积报告open: true,gzipSize: true,brotliSize: true,}),],

yarn build 后会自动打开stats.html

echarts 占比比较大，修改为按需引入后由

到

减少了1M左右

utils文件夹下新建js

//echarts.jsimport * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/legend';
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';// **引入组件 都是以Chart结尾 关键 我这里只用到了折线图, 如果要引入饼状图 PieChart
import { LineChart, PieChart, BarChart, RadarChart } from 'echarts/charts';// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LineChart,LabelLayout,UniversalTransition,CanvasRenderer,PieChart,BarChart,RadarChart
]);export default echarts;

在使用的页面里按照下面的引入方式即可

import  echarts from '@/utils/echarts';