博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
阅读量:6479 次
发布时间:2019-06-23

本文共 828 字,大约阅读时间需要 2 分钟。

现象,在一个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链接:   ,这里主要分了common, simple和标准的三个版本,关于各个版本的内容和区别,可用参考echarts官网上的介绍:  
(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);

转载地址:http://nkwuo.baihongyu.com/

你可能感兴趣的文章
caffe编译关于imread问题的解决
查看>>
unity3d 材质概述 ---- shader
查看>>
static的小小小细节
查看>>
二维数组和二级指针的传递问题
查看>>
Spring boot——logback.xml 配置详解(二)
查看>>
判断某个对象是不是数组
查看>>
Shell练习 行列转换
查看>>
MFC读入导出到EXCEL
查看>>
spring jpa 条件查询统计
查看>>
北斗卫星是如何实现手机定位的?
查看>>
类型初始值设定项引发异常
查看>>
视频接口系列(三)--------DVI(VGA基础上发展起来的数字信号传输)
查看>>
【NOIP2014】飞扬的小鸟
查看>>
程序员,你可以更优秀些
查看>>
linux下不依赖libc的非脚本命令列表
查看>>
新建一个文章
查看>>
ArcGIS for JavaScript 的Demo中在线引用转为离线
查看>>
mysql学习之-三种安装方式与版本介绍
查看>>
C#中的委托是什么?
查看>>
减小delphi体积的方法
查看>>