vue中使用echarts按需引入解决打包体积过大问题

官网中给出的按需引入：

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

在 5.0.1 中，引入了新的按需引入接口

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

以上两种引入方式，在项目中使用后，打包后文件体积依然很大。

改用按需引入：
1、先创建一个 echarts.js 文件，我项目中用到的是饼图（pie）

const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/component/grid');
require('echarts/lib/chart/pie');
export default echarts

2、用到的组件中引入文件

import echarts from "./ echarts.js";

再打包的时候发现体积比之前小了 1M 多。