vue中更好的按需引入echarts-蒲公英云

vue中更好的按需引入echarts

echarts很大。

如果项目中直接全局引入，在不开启gzip的情况下，打包的体积会增加1M。

以下未引入之前
在这里插入图片描述
引入之后

import echart from 'echarts'
Vue.prototype.$echart = echart;

在这里插入图片描述
实际上，有个简单的按需引入方式，比如你的项目是vue-router的项目，不同组件是异步加载的，若在组件中引入echarts。那么就不至于所有的路由页面都因为echarts而变慢。

比如我再about页面中引入echarts
在这里插入图片描述
可以看到仅仅是about的体积变大了。

当然这样的按需引入并非echarts按需引入。而是vue-router的。echarts其实也是支持的。做法如下：

比如我写一个js文件用来单独来写需要引入的echarts模块，我这里用了柱状图。

// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default echarts