echarts 打包完之后體積太大解決方案。

方案一：在index.js模板文件中引入cdn, 打包的時候webpack配置externals ,這樣webpack就不會打這個包到vendors里，減少體積，缺點是cnd穩定性可能會有問題，而且是先請求cdn資源之后再請求自己服務器代碼，非同源。

方案二：按需加載(利用插件)

 注意.如果有頁面引入了echarts全部包（import echarts from 'echarts'），其他頁面的按需加載將會失效，webpack將會打包整個echarts，最終打包的體積還是整個webpack包的體積。

 

3.按需加載步驟。（npm 插件地址以及使用方法:https://www.npmjs.com/package/babel-plugin-equire）

當我們只需要 echarts 的 line 和 tooltip 模塊的時候，我們會這么寫：

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'

當引入了這個插件后，我們只需要這個寫：

// eslint-disable-next-line
const echarts = equire([ 'line', 'tooltip' ]) 

這個插件會自動幫我們轉化為上面的形式

安裝  npm i babel-plugin-equire -D

然后，在 .babelrc 文件中添加該插件

{
  "plugins": [
  	 // other plugins
  	 ...
  	 
 "equire"
  ]
}

配合 code-splitting

將上面文件的 equire 替換為 equireAsync（編譯時運行），這個時候 equireAsync() 返回的是一個函數，函數執行后會返回一個 promise 對象

// eslint-disable-next-line
const initEcharts = equireAsync([ 'line', 'tooltip'，
 //...其他模塊  
]) export default initEcharts 

在其他文件中使用：

import initEcharts from '@/src/utils/initEcharts' initEcharts() .then(echarts => { // do somthing with echarts })