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);







免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM