zoukankan      html  css  js  c++  java
  • 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);






  • 相关阅读:
    Windows 上如何安装Sqlite
    StringBuffer类讲解
    Android Debug Bridge(adb)百度
    0117调试 (Logout调试)
    android cmd adb shell 出现 Device offline的状态下
    菜鸟:为什么要用不同的包 android
    0105Activity+Intent
    adb shell 后感
    0116sqlite
    iptables
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5786222.html
Copyright © 2011-2022 走看看