微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法

发布时间:2024-01-03 17:00

Echarts真机调试报错

解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示。

重点:发布线上时,一定要将这句去掉,现在只是不支持真机调试,线上是可以使用的。


    

引入Echarts占内存过大解决方法

微信小程序代码包大小限制为2MB,但是echarts代码包就快1M,再结合额外的业务代码以及其他资源很有可能超过2MB的限制,对于这个问题,我们解决方案有两种:

 1、压缩echarts的大小

从echarts官网下载微信小程序集成DEMO以后,官方包内容如下:(ECharts官方文档链接)

微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法_第1张图片

首先,我们通过官网文档的下载中 官方自定义构建 可以下载经过UglifyJS压缩后的echarts,也可以选择只含有实际项目使用到图表的echarts.js

因为默认通过官方DEMO下载的ec-canvas文件夹中含有微信小程序引入echarts的全部内容,但实际项目中可能用到了柱状图、折线图很多用不到的图表/工具没必要放在项目中占用代码大小

大家可以根据实际项目情况选择用到的echarts组件进行构建,下图时我项目中使用到的组件自定义构建内容:

微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法_第2张图片 

 选择完成以后,点击【下载】就可以下载我们自定义构建的echart文件了

注:勾选代码压缩以后下载的文件名称为:echarts.min.js

       未勾选代码压缩以后下载的文件名称为:echarts.js

 然后我们将自定义构建下载的echarts.min.js重命名为echarts.js再替换项目ec-canvas目录下的echarts.js,访问项目发现echarts相关图表渲染正常,控制台无任何异常输出,这样我们就将原本大小将近1000KB的echarts压缩了一半。

注:自定义构建下载的echarts.min.js重命名后放入项目后可能会出现无法渲染图表、控制台报undefined、找不到echart部分函数错误,说明我们在项目中所使用到的echarts的功能在自定义构建中没有选择到,这个时候需要我们认真核对自定义构建是否漏选了项目中使用到的功能。

2、使用分包

分包功能可以直接参考微信小程序官方文档就可以解决这个问题:官方链接

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号