echarts vue.js javascript vue3中使用echart，按需引入和vite打包优化

在项目的开发中需要使用echart完成数据的可视化展示，因为只是使用到折线图和柱状图，但是在打包的时候，发现echart会全部打包进去，为减少编译后的包体积进行相关设置的配置。（当然除了设置按需引入，也可以使用cdn的方式，此篇不涉及）

pnpm i echart --save-dev

在util中新建commonEchart.ts

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。

import * as echarts from "echarts/core";

/** 引入柱状图and折线图图表，图表后缀都为 Chart */

import { BarChart, LineChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component

import {

TitleComponent,

TooltipComponent,

GridComponent,

DatasetComponent,

TransformComponent,

} from "echarts/components";

// 标签自动布局，全局过渡动画等特性

import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件

echarts.use([

TitleComponent,

TooltipComponent,

GridComponent,

DatasetComponent,

TransformComponent,

BarChart,

LabelLayout,

UniversalTransition,

CanvasRenderer,

LineChart,

]);

// 导出

export default echarts;

把echart 设置成组件

myChart.vue

在需要使用的页面中

在vite.config.ts的build通过设置 manualChunks方案，将echarts单独打包并通过按需引入减少主包体积

build: {

rollupOptions: {

output: {

manualChunks: {

echarts: ['echarts']

}

},

},

},

相关阅读

 您阅读本篇文章共花了：