插件导致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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
Vue实现多页签组件
Jan 14 Vue.js
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
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python如何实现异步调用函数执行
2019/07/08 Python
python递归函数用法详解
2020/10/26 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
华为慧通笔试题
2016/04/22 面试题
自我评价范文分享
2014/01/04 职场文书
环境建设实施方案
2014/03/14 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
入党心得体会
2019/06/20 职场文书
微信小程序调用python模型
2022/04/21 Python