插件导致ECharts被全量引入的坑示例解析

正文

ECharts作为一个图标库已经被大家广泛使用，它提供了各式各样的图表类型，但是在我们日常使用中可能只会用到其中的某几个图表类型，常用的基本就是柱状图，条线图，及中国地图插件用来表示全国各地的数据这些，所以在我们使用echarts的时候首先需要考虑的是按需引入，避免把整个库都打包进去，echarts的整个打包体积还是相当可观的🤪。

以下仅针对 echarts@v4 版本

按需引入的问题

以下是正常的按需引入echarts的一些图标组件，我们从echarts/lib下面按需引入我们需要的图标，对于lib下的组件没有任何问题：

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/tooltip'
// ...

接下来我们再看下当我们需要用中国地图的时候:

import 'echarts/map/js/china.js'

问题分析

我们只需像上面一样直接引入china.js即可使用中国地图，看起来似乎使用上也没啥问题，那我们就用webpack-bundle-analyzer来看下打包出来的实际情况：

从图中我们可以看到，有2处地方都出现了echarts，这和我们的预期完全不符，我们希望的是echarts/lib下通用的直接打到vendor.js里去，然后在某个页面里面我们用到了china map这个只跟着路由异步加载进来（如上图右侧紫色区域），但是异步加载的js里也出现了完整的echarts库，明显跟vendor.js里重复了，这就😓了，我们明明只引入了china.js，为啥会整个引入，还被重复引入到了2个文件里。

这个时候我们就从china.js入手，看看这个文件里面到底干了什么事情：

我们进入china.js里面，仔细观察会发现上图中第26行，直接require('echarts')了整个库，这就相当于我们应用代码再怎么按需引入，只要你用了china插件，整个echarts还是被全量引入了进来，然后上面webpack-bundle-analyzer图在多处出现的原因我们就可以推出是因为我们引用代码跟china.js里引入的路径不一样从而导致了chunk那个js被重复引入了echarts完整库:

// 应用代码只映入了核心库
import echarts from 'echarts/lib/echarts'
// china.js require了整个echarts
require('echarts')

解决方案

OK，通过上面分析我们已经发现问题所在，那么我们可以有哪些办法来解决这样的问题呢(让echarts官方去改这个问题似乎不是很现实😂)，以下例举了几种常用的潜在解决方案，大家可根据自己项目的实际情况使用（有更好办法的大佬们可在评论里指出👏）:

• webpack的alias，对于直接引入echarts的地方，替换成echarts/lib/echarts，但是这样可能会对其他地方全量引入用到的图表，但是你又没有手动按需引入相应的图表就可能报错了
• 通过webpack.NormalModuleReplacementPlugin插件或者alias直接替换echarts/map/js/china.js的引用，换成自己的一个文件，文件可以copychina.js，然后把require('echarts')换掉，见下面一点
• copyregisterMap方法内容，直接引用自己的这个文件😅:

优化后我们再用webpack-bundle-analyzer看下打包情况，可以发现只剩下一个vendor里的echarts了，符合我们的预期：

以上就是使用echarts插件时发现的一些引入问题，大家在使用第三方库的时候，特别是一些大的库时还是多留意下打包出来的结果是不是跟预期是一样的，很有可能一个小的引入写法默默地导致了整个库都被引入了😬。

更多关于插件全量引入ECharts坑的资料请关注脚本之家其它相关文章！

最新评论