本文共 629 字，大约阅读时间需要 2 分钟。

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

接着在组件中引入这个自己封装的模块即可。再来打包试试。

可以看到about文件的体积缩小了一倍，还是很可观的。