正文

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

以下僅針對(duì) echarts@v4 版本

按需引入的問(wèn)題

以下是正常的按需引入echarts的一些圖標(biāo)組件，我們從echarts/lib下面按需引入我們需要的圖標(biāo)，對(duì)于lib下的組件沒(méi)有任何問(wèn)題：

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'
// ...

接下來(lái)我們?cè)倏聪庐?dāng)我們需要用中國(guó)地圖的時(shí)候:

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

問(wèn)題分析

我們只需像上面一樣直接引入china.js即可使用中國(guó)地圖，看起來(lái)似乎使用上也沒(méi)啥問(wèn)題，那我們就用webpack-bundle-analyzer來(lái)看下打包出來(lái)的實(shí)際情況：

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

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

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

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

解決方案

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

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

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

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

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

最新評(píng)論