分享一下Echarts在芋头微信小程序开发中的践踏记录(echarts是如何运作的)

微信小程序开发教程专栏介绍了Echarts在Taro微信小程序开发中的踩坑记录。

背景最近作者正在用Taro开发一个微信小程序。在推出Echarts图表库时，微信检测到单个包超过2M的一系列优化措施的坑记录，希望引导读者少走弯路。

为什么选择Echarts？微信小程序目录中最常用的两个图表库如下:

Echarts-for-weixin——echarts微信小程序版本wx-charts——对比两个基于微信小程序的海图库，优劣正好相反。

Echarts-for-weixin:功能强大，但是非常大。wx-图表:功能比较简单，但是小。因为笔者对echarts的使用比较熟悉，而且有些需要需求图表支持的功能wx-图表不支持，所以最终选择使用echarts-for-weixin，坑之旅就此开始。

如何处理单个包裹超过2M？作者介绍了echarts -for -微信，愉快地完成了需求，准备上传代码发布微信小程序体验版，坑开始了。...

当单个数据包超过2M上限时，表示上传代码异常，并弹出提示。

当单个包超过2M时，有如下两种优化方案:

微信分包加载分包单包卷优化(减码、压缩、静态资源CDN等。)由于作者的开发需求属于新功能，新功能模块通过独立分包路线加载，但分包后仍有单包超过2M的限制。

经过分析发现，业务模块引用的echarts组件会被Taro打包到common.js模块中，导致所有分包模块重复计算echarts的大小，导致旧的分包模块超过2M的限制。

为什么echarts-for-weixin打包到common.js模块中？

原因是echarts依赖于echarts-for-weixin组件和外部业务组件，导致Taro认为echarts.js依赖于多个模块，所以打包到common.js中。

为了解决这个问题，采用了splitChunks打包配置，将echarts的各个模块打包，然后将依赖项注入到对应的依赖页(addChunkPages)中。配置如下:

//打包后echartchunkname e图表的输出路径mini:{ web pack chain(chain){ chain . merge({ optimization:{ split chunks:{ cache groups:{

echarts-for-weixin组件找不到echarts模块依赖项。...

经过一系列的分析，发现太郎对splitChunks这个微信原生组件的依赖是有问题的，官方也没有修复这个问题。...

Taro编译成功后需要手动修改编译好的ec-canvas.js，注入echarts依赖，如下图所示:

经过以上处理，最终运行正常，单包超2M问题全部解决。

以为这样就结束了？每次编译后我都不能手动修改编译后的文件。如果哪天我忘了手动修改版本，就会导致上线问题，风险很大。

所以需要写一个Taro打包的hack插件，自动注入编译好的echarts依赖代码。

写一个Taro编译器插件很简单，请参考官方文档。插件代码如下:

const fs = require(' fs ')；const path = require(' path ')；module . exports . default = module . exports =(CTX，options)= & gt；{ CTX . onbuildfinish(()= & gt；{ console . log(' e charts builds hack injection ')const target = path . join(CTX . paths . output path，' subpackages/home page/study data/chartline/ec-canvas//ec-canvas . js ')；const data = fs . read file sync(target，' utf8 ')；fs.writeFileSync(target，' require(& quot；../../echart common & quot；);$ {data }`)}}复制代码。最后，太郎微信小程序开发中Echarts的录制即将结束，希望能给准备在太郎微信小程序中使用echarts图表库的读者一些帮助。

微信app下载微信是一款手机通讯软件，支持通过手机网络发送语音消息、视频、图片、文字。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

这几篇文章你可能也喜欢：

• 分享Echarts在太郎微信小程序开发中的踩踏记录(小程序使用echarts)

本文由主机参考刊发，转载请注明：分享一下Echarts在芋头微信小程序开发中的践踏记录(echarts是如何运作的) https://zhujicankao.com/120727.html