分享Echarts在芋头微信小程序开发中的问题记录 - 行业资讯

　　介绍

小编给大家分享一下分享Echarts在芋头微信小程序开发中的问题记录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

背景

近期笔者在使用芋头进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2 m的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路。

为什么选择Echarts ?

微信小程序目录市面上使用最多的两款图表库,如下:

<李>

echarts-for-weixin——Echarts微信小程序版本

<李>

wx-charts——基于微信小程序的图表库

对比两款图表库优缺点刚好相反。

<李>

echarts-for-weixin:功能强大,但体积非常大

<李>

wx-charts:功能相对简单,但体积小

由于笔者对Echarts使用较熟悉,且需求图表需要支持的部分功能wx-charts不支持,所以最终选择使用echarts-for-weixin,踩坑之旅就此开始。

单包超过2 m,如何处理?

笔者引入echarts-for-weixin,快乐的做完需求,准备上传代码发布微信小程序体验版,坑就此开始…

分享Echarts在芋头微信小程序开发中的问题记录

当单包超过2 m上限,则上传代码出现异常,出现上面弹窗提示。

微信小程序官方要求,单包不超过2米,整包不超过16 m

遇到单包超过2 m,优化方案有如下两种:
<李>
微信分包加载子包
<李>
单包体积优化(缩减代码,压缩,静态资源CDN等等)

由于笔者本次开发需求属于新功能,所以把新功能模块采用独立的分包路由加载,但分包后,还是出现单包超过2 m的限制。

经过分析发现业务模块引用的Echarts组件,会被太郎打包到common.js模块,导致所有的分包模块都会重复计算Echarts的大小,导致旧分包模块超过2 m的限制。

<强>为什么echarts-for-weixin会被打包到common.js模块?

原因是Echarts被echarts-for-weixin组件和外部业务组件所依赖,导致芋头认为echarts.js被多个模块所依赖,所以打包到常见。js .

为了解决此问题,采用splitChunks打包配置,将echarts单独模块打包,然后在对应的依赖页面(addChunkPages)注入依赖,配置如下:
//,echartChunkName echarts打包后的输出路径　　迷你才能:{ 　　,,,webpackChain(链),{ 　　,,,,,chain.merge ({ 　　,,,,,,,优化:,{ 　　,,,,,,,,,splitChunks:, { 　　,,,,,,,,,,,cacheGroups:, { 　　,,,,,,,,,,,,,(echartChunkName):, { 　　,,,,,,,,,,,,,,,名字:,echartChunkName, 　　,,,,,,,,,,,,,,,优先级:,50岁, 　　,,,,,,,,,,,,,,,测试(模块),{ 　　,,,,,,,,,,,,,,,,,return /子包[\ \/]homeworkPage [\ \/] studyData [\ \/] ChartLine [\ \/] ec-canvas [\ \/] echarts.js/test ( 　　,,,,,,,,,,,,,,,,,,module.resource 　　,,,,,,,,,,,,,,,,,); 　　,,,,,,,,,,,,,,,}, 　　,,,,,,,,,,,,,}, 　　,,,,,,,,,,,}, 　　,,,,,,,,,}, 　　,,,,,,,}, 　　,,,,,}); 　　,,,}, 　　,,,addChunkPages(页面,pagesNames), { 　　,,,,,pages.set(“子包/homeworkPage/studyData/ChartLine/index",, [echartChunkName]); 　　,,,,,pages.set(“子包/homeworkPage/studyData/ChartLine/ec-canvas/ec-canvas",, [echartChunkName]); 　　,,,} 　　}才能复制代码
芋头通过mini.webpackChain自定义webpack配置,请参考官网文档

webpack分包配置splitChunks,请参考官网文档

通过mini.addChunkPages设置分包依赖,请参考官网文档

经过以上处理,common.js体积恢复正常,以为就此结束。

结果新的坑又出现了……如下图:

echarts-for-weixin组件找不到Echarts模块依赖…

经过一系列的分析,发现芋头对原生微信组件splitChunks分包打包的依赖注入有问题官方还没有修复此问题…

需要在芋头编译成功后,手动修改编译后的ec-canvas。js,注入echarts依赖,如下图:

分享Echarts在芋头微信小程序开发中的问题记录