正文

ECharts作為一個圖標(biāo)庫已經(jīng)被大家廣泛使用，它提供了各式各樣的圖表類型，但是在我們?nèi)粘Ｊ褂弥锌赡苤粫玫狡渲械哪硯讉€圖表類型，常用的基本就是柱狀圖，條線圖，及中國地圖插件用來表示全國各地的數(shù)據(jù)這些，所以在我們使用echarts的時候首先需要考慮的是按需引入，避免把整個庫都打包進(jìn)去，echarts的整個打包體積還是相當(dāng)可觀的??。

以下僅針對 echarts@v4 版本

按需引入的問題

以下是正常的按需引入echarts的一些圖標(biāo)組件，我們從echarts/lib下面按需引入我們需要的圖標(biāo)，對于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'
// ...

接下來我們再看下當(dāng)我們需要用中國地圖的時候:

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

問題分析

我們只需像上面一樣直接引入china.js即可使用中國地圖，看起來似乎使用上也沒啥問題，那我們就用webpack-bundle-analyzer來看下打包出來的實際情況：

從圖中我們可以看到，有2處地方都出現(xiàn)了echarts，這和我們的預(yù)期完全不符，我們希望的是echarts/lib下通用的直接打到vendor.js里去，然后在某個頁面里面我們用到了china map這個只跟著路由異步加載進(jìn)來（如上圖右側(cè)紫色區(qū)域），但是異步加載的js里也出現(xiàn)了完整的echarts庫，明顯跟vendor.js里重復(fù)了，這就??了，我們明明只引入了china.js，為啥會整個引入，還被重復(fù)引入到了2個文件里。

這個時候我們就從china.js入手，看看這個文件里面到底干了什么事情：

我們進(jìn)入china.js里面，仔細(xì)觀察會發(fā)現(xiàn)上圖中第26行，直接require('echarts')了整個庫，這就相當(dāng)于我們應(yīng)用代碼再怎么按需引入，只要你用了china插件，整個echarts還是被全量引入了進(jìn)來，然后上面webpack-bundle-analyzer圖在多處出現(xiàn)的原因我們就可以推出是因為我們引用代碼跟china.js里引入的路徑不一樣從而導(dǎo)致了chunk那個js被重復(fù)引入了echarts完整庫:

// 應(yīng)用代碼只映入了核心庫
import echarts from 'echarts/lib/echarts'
// china.js require了整個echarts
require('echarts')

解決方案

OK，通過上面分析我們已經(jīng)發(fā)現(xiàn)問題所在，那么我們可以有哪些辦法來解決這樣的問題呢(讓echarts官方去改這個問題似乎不是很現(xiàn)實??)，以下例舉了幾種常用的潛在解決方案，大家可根據(jù)自己項目的實際情況使用（有更好辦法的大佬們可在評論里指出??）:

• webpack的alias，對于直接引入echarts的地方，替換成echarts/lib/echarts，但是這樣可能會對其他地方全量引入用到的圖表，但是你又沒有手動按需引入相應(yīng)的圖表就可能報錯了
• 通過webpack.NormalModuleReplacementPlugin插件或者alias直接替換echarts/map/js/china.js的引用，換成自己的一個文件，文件可以copychina.js，然后把require('echarts')換掉，見下面一點
• copyregisterMap方法內(nèi)容，直接引用自己的這個文件??:

優(yōu)化后我們再用webpack-bundle-analyzer看下打包情況，可以發(fā)現(xiàn)只剩下一個vendor里的echarts了，符合我們的預(yù)期：

以上就是使用echarts插件時發(fā)現(xiàn)的一些引入問題，大家在使用第三方庫的時候，特別是一些大的庫時還是多留意下打包出來的結(jié)果是不是跟預(yù)期是一樣的，很有可能一個小的引入寫法默默地導(dǎo)致了整個庫都被引入了??。

更多關(guān)于插件全量引入ECharts坑的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論