現象,在一個webpack+vue的開發環境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echarts'
然后編譯的時候加上了Uglify選項,發現vendor文件的大小已經達到了800多k,導致首次加載速度比較慢,然后我們這個是webapp,就更慢了。
所以考慮把echarts提取出來,
改用cdn版本的echarts,具體操作步驟如下:
(0)找到可用的echartscdn資源
在bootcdn上有echarts相關的cdn鏈接:
http://www.bootcdn.cn/echarts/ ,這里主要分了common, simple和標准的三個版本,關於各個版本的內容和區別,可用參考echarts官網上的介紹:
http://echarts.baidu.com/download.html
(1)在html中引入echarts
這里我們選擇simple版本的,在html中添加script標簽如下:
<script src="//cdn.bootcss.com/echarts/3.2.2/echarts.simple.min.js"></script>
(2)在webpack中配置echarts
在webpack.base.conf.js文件內添加external選項,在module.exports內部,和entry平級;
externals: {"echarts": "echarts"},
externals中的key是給import的時候用的,value表示的是如何在global中訪問到該對象,這里是window.echarts
(3)在vue文件中使用
在vue中使用echarts的時候不再需要importecharts了,可以直接使用。
this._vue_charts = echarts.init(document.getElementById('myChart'));
this._vue_charts.setOption(this.options);