插件导致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了，符合我们的预期：

来源：https://juejin.cn/post/7145854101983592462