插件导致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 相关文章推荐
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
Node.js API详解之 net模块实例分析
May 18 Javascript
理解JavaScript中的对象
Aug 25 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
php 动态多文件上传
2009/01/18 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
Smarty模板语法详解
2019/07/20 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
自荐信格式范文
2013/10/07 职场文书
师生聚会感言
2014/01/26 职场文书
公休请假条
2014/04/11 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
python实现简单的井字棋
2021/05/26 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
英镑符号 £
2022/02/17 杂记
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫