Echarts在Taro微信小程序开发中的踩坑记录
背景
近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路。
为什么选择Echarts?
微信小程序目录市面上使用最多的两款图表库,如下
- ——echarts微信小程序版本
- ——基于微信小程序的图表库
对比两款图表库优缺点刚好相反。
- echarts-for-weixin功能强大,但体积非常大
- wx-charts功能相对简单,但体积小
由于笔者对echarts使用较熟悉,且需求图表需要支持的部分功能wx-charts不支持,所以最终选择使用echarts-for-weixin,踩坑之旅就此开始。
单包超过2M,如何处理?
笔者引入echarts-for-weixin,快乐的做完需求,准备上传代码发布微信小程序体验版,坑就此开始...
当单包超过2M上限,则上传代码出现异常,出现上面弹窗提示。
微信小程序官方要求,单包不超过2M,整包不超过16M
遇到单包超过2M,优化方案有如下两种
- 微信分包加载subpackages
- 单包体积优化(缩减代码、压缩、静态资源CDN等等)
由于笔者本次开发需求属于新功能,所以把新功能模块采用独立的分包路由加载,但分包后,还是出现单包超过2M的限制。
经过分析发现业务模块引用的echarts组件,会被Taro打包到mon.js模块,导致所有的分包模块都会重复计算echarts的size,导致旧分包模块超过2M的限制。
为什么echarts-for-weixin会被打包到mon.js模块?
原因是echarts被echarts-for-weixin组件和外部业务组件所依赖,导致Taro认为echarts.js被多个模块所依赖,所以打包到mon.js。
为了解决此问题,采用splitChunks打包配置,将echarts单独模块打包,然后在对应的依赖页面(addChunkPages)注入依赖,配置如下
// echartChunkName echarts打包后的输出路径 mini: { webpackChain(chain) { chain.merge({ optimization: { splitChunks: { cacheGroups: { [echartChunkName]: { name: echartChunkName, priority: 50, test(module) { return /subpackages[\\/]homeworkPage[\\/]studyData[\\/]ChartLine[\\/]ec-canvas[\\/]echarts.js/.test( module.resource ); }, }, }, }, }, }); }, addChunkPages(pages, pagesNames) { pages.set("subpackages/homeworkPage/studyData/ChartLine/index", [echartChunkName]); pages.set("subpackages/homeworkPage/studyData/ChartLine/ec-canvas/ec-canvas", [echartChunkName]); } }
Taro通过mini.webpackChain自定义webpack配置,请参考官网
webpack分包配置splitChunks,请参考官网
通过mini.addChunkPages设置分包依赖,请参考官网
经过以上处理,mon.js体积恢复正常,以为就此结束。
结果新的坑又出现了......如下图:
echarts-for-weixin组件找不到echarts模块依赖...
经过一系列的分析,发现Taro对原生微信组件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) => { ctx.onBuildFinish(() => { console.log('echarts构建hack注入') const target = path.join(ctx.paths.outputPath, 'subpackages/homeworkPage/studyData/ChartLine/ec-canvas//ec-canvas.js'); const data = fs.readFileSync(target, 'utf8'); fs.writeFileSync(target, `require("../../echartCommon");${data}`) }) }
注Taro版本2.2以上才支持自定义插件
Echarts在Taro微信小程序开发踩坑记录到此接近尾声,希望能给正准备在Taro微信小程序使用echarts图表库的读者一些帮助。
到此这篇关于Echarts在Taro微信小程序开发中的踩坑记录的文章就介绍到这了,更多相关Taro微信小程序 Echarts内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南