echarts按需加载和不按需加载，打包后的具体对比

用rollup-plugin-visualizer插件的图对比

按需加载前	按需加载后
1070.99 kb	662.32kb
2.1MB	1.16MB

按需加载前

按需加载后

插件指标
按需加载前

按需加载后

---

对比的插件rollup-plugin-visualizer使用

npm install --save-dev rollup-plugin-visualizer

vite.config.js配置

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [// 其他插件...vue(),visualizer({open: true, // 打包后自动打开报告gzipSize: true, // 显示 gzip 压缩后的大小brotliSize: true, // 显示 brotli 压缩后的大小}),],
});

echarts没有按需加载代码
直接引入
import * as echarts from ‘echarts’;
app.vue

<template><div><div ref="barChart" style="width: 600px;height:400px;"></div><div ref="lineChart" style="width: 600px;height:400px;"></div><div ref="ringChart" style="width: 600px;height:400px;"></div></div>
</template><script>import * as echarts from 'echarts';export default {mounted() {this.initBarChart();this.initLineChart();this.initRingChart();},methods: {initBarChart() {const barChart = echarts.init(this.$refs.barChart);barChart.setOption({title: { text: '柱状图示例' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});},initLineChart() {const lineChart = echarts.init(this.$refs.lineChart);lineChart.setOption({title: { text: '折线图示例' },tooltip: {},xAxis: {type: 'category',boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {}}]});},initRingChart() {const ringChart = echarts.init(this.$refs.ringChart);ringChart.setOption({title: { text: '环形图示例', left: 'center' },tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'], // 这里设置了内外半径，形成环形图avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: '搜索引擎' },{ value: 735, name: '直接访问' },{ value: 580, name: '邮件营销' },{ value: 484, name: '联盟广告' },{ value: 300, name: '视频广告' }]}]});}}
}
</script><style scoped>
/* 样式可以根据需要调整 */
</style>

按需加载：
（1）把需要的图处理到js文件里

// src/echartsSetup.jsimport * as echarts from 'echarts/core';
import {BarChart,LineChart,PieChart // 环图是通过饼图设置特定配置项实现的
} from 'echarts/charts';
import {GridComponent,TooltipComponent,LegendComponent,DatasetComponent,TitleComponent,ToolboxComponent,DataZoomComponent,TransformComponent,GraphicComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';// 注册你需要的组件和渲染器
echarts.use([BarChart,LineChart,PieChart, // 环图需要PieChart支持GridComponent,TooltipComponent,LegendComponent,DatasetComponent,TitleComponent,ToolboxComponent,DataZoomComponent,TransformComponent,GraphicComponent,CanvasRenderer
]);export default echarts;

（2）从js文件引入

<template><div><div ref="barChart" style="width: 600px;height:400px;"></div><div ref="lineChart" style="width: 600px;height:400px;"></div><div ref="ringChart" style="width: 600px;height:400px;"></div></div>
</template><script>
import echarts from './echartsSetup'; // 引入自定义的 echarts 配置export default {mounted() {this.initBarChart();this.initLineChart();this.initRingChart();},methods: {initBarChart() {const barChart = echarts.init(this.$refs.barChart);barChart.setOption({title: { text: '柱状图示例' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});},initLineChart() {const lineChart = echarts.init(this.$refs.lineChart);lineChart.setOption({title: { text: '折线图示例' },tooltip: {},xAxis: {type: 'category',boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {}}]});},initRingChart() {const ringChart = echarts.init(this.$refs.ringChart);ringChart.setOption({title: { text: '环形图示例', left: 'center' },tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'], // 这里设置了内外半径，形成环形图avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: '搜索引擎' },{ value: 735, name: '直接访问' },{ value: 580, name: '邮件营销' },{ value: 484, name: '联盟广告' },{ value: 300, name: '视频广告' }]}]});}}
}
</script><style scoped>
/* 样式可以根据需要调整 */
</style>