插件导致ECharts被全量引入的坑示例解析


Posted in Javascript onSeptember 23, 2022

正文

ECharts作为一个图标库已经被大家广泛使用,它提供了各式各样的图表类型,但是在我们日常使用中可能只会用到其中的某几个图表类型,常用的基本就是柱状图,条线图,及中国地图插件用来表示全国各地的数据这些,所以在我们使用echarts的时候首先需要考虑的是按需引入,避免把整个库都打包进去,echarts的整个打包体积还是相当可观的?。

以下仅针对 echarts@v4 版本

按需引入的问题

以下是正常的按需引入echarts的一些图标组件,我们从echarts/lib下面按需引入我们需要的图标,对于lib下的组件没有任何问题:

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/tooltip'
// ...

接下来我们再看下当我们需要用中国地图的时候:

import 'echarts/map/js/china.js'

问题分析

我们只需像上面一样直接引入china.js即可使用中国地图,看起来似乎使用上也没啥问题,那我们就用webpack-bundle-analyzer来看下打包出来的实际情况:

插件导致ECharts被全量引入的坑示例解析

从图中我们可以看到,有2处地方都出现了echarts,这和我们的预期完全不符,我们希望的是echarts/lib下通用的直接打到vendor.js里去,然后在某个页面里面我们用到了china map这个只跟着路由异步加载进来(如上图右侧紫色区域),但是异步加载的js里也出现了完整的echarts库,明显跟vendor.js里重复了,这就?了,我们明明只引入了china.js,为啥会整个引入,还被重复引入到了2个文件里。

这个时候我们就从china.js入手,看看这个文件里面到底干了什么事情:

插件导致ECharts被全量引入的坑示例解析

我们进入china.js里面,仔细观察会发现上图中第26行,直接require('echarts')了整个库,这就相当于我们应用代码再怎么按需引入,只要你用了china插件,整个echarts还是被全量引入了进来,然后上面webpack-bundle-analyzer图在多处出现的原因我们就可以推出是因为我们引用代码跟china.js里引入的路径不一样从而导致了chunk那个js被重复引入了echarts完整库:

// 应用代码只映入了核心库
import echarts from 'echarts/lib/echarts'
// china.js require了整个echarts
require('echarts')

解决方案

OK,通过上面分析我们已经发现问题所在,那么我们可以有哪些办法来解决这样的问题呢(让echarts官方去改这个问题似乎不是很现实?),以下例举了几种常用的潜在解决方案,大家可根据自己项目的实际情况使用(有更好办法的大佬们可在评论里指出?):

  • webpack的alias,对于直接引入echarts的地方,替换成echarts/lib/echarts,但是这样可能会对其他地方全量引入用到的图表,但是你又没有手动按需引入相应的图表就可能报错了
  • 通过webpack.NormalModuleReplacementPlugin插件或者alias直接替换echarts/map/js/china.js的引用,换成自己的一个文件,文件可以copychina.js,然后把require('echarts')换掉,见下面一点
  • copyregisterMap方法内容,直接引用自己的这个文件?:

插件导致ECharts被全量引入的坑示例解析

优化后我们再用webpack-bundle-analyzer看下打包情况,可以发现只剩下一个vendor里的echarts了,符合我们的预期:

插件导致ECharts被全量引入的坑示例解析

以上就是使用echarts插件时发现的一些引入问题,大家在使用第三方库的时候,特别是一些大的库时还是多留意下打包出来的结果是不是跟预期是一样的,很有可能一个小的引入写法默默地导致了整个库都被引入了?。

更多关于插件全量引入ECharts坑的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 #Javascript
Moment的feature导致线上bug解决分析
Sep 23 #Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 #Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 #Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php有效防止同一用户多次登录
2015/11/19 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
利用Python优雅的登录校园网
2020/10/21 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
借款协议书范本
2014/04/22 职场文书
医院合作协议书
2014/08/19 职场文书
个人授权委托书
2014/09/15 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
JavaScript原型链详解
2021/11/07 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js
HttpClient实现表单提交上传文件
2022/08/14 Java/Android