插件导致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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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/01 无线电
php microtime获取浮点的时间戳
2010/02/21 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python 实现UTC时间加减的方法
2018/12/31 Python
numpy.random模块用法总结
2019/05/27 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python读取YAML文件过程详解
2019/12/30 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python 解析简单的XML数据
2020/07/24 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
护士演讲稿范文
2014/01/05 职场文书
财务主管自我鉴定
2014/01/17 职场文书
计算机专业求职信
2014/06/02 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
理解python中装饰器的作用
2021/07/21 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js