Wabpack系列：在webpack+vue開發環境中使用echarts導致編譯檔案過大怎麼辦？

標籤：

現象，在一個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);



來自為知筆記(Wiz)

Wabpack系列：在webpack+vue開發環境中使用echarts導致編譯檔案過大怎麼辦？