Echarts在Taro微信小程序开发中的踩坑记录


Posted in Javascript onNovember 09, 2020

背景

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

为什么选择Echarts?

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

  • echarts-for-weixin——echarts微信小程序版本
  • wx-charts——基于微信小程序的图表库

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

  • echarts-for-weixin:功能强大,但体积非常大
  • wx-charts:功能相对简单,但体积小

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

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

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

Echarts在Taro微信小程序开发中的踩坑记录

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

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

遇到单包超过2M,优化方案有如下两种:

  • 微信分包加载subpackages
  • 单包体积优化(缩减代码、压缩、静态资源CDN等等)

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

Echarts在Taro微信小程序开发中的踩坑记录

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

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

原因是echarts被echarts-for-weixin组件和外部业务组件所依赖,导致Taro认为echarts.js被多个模块所依赖,所以打包到common.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设置分包依赖,请参考官网文档

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

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

Echarts在Taro微信小程序开发中的踩坑记录

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

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

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

Echarts在Taro微信小程序开发中的踩坑记录

经过上面的处理,终于正常运行,单包超过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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js密码强度检测
Jan 07 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
Vue路由权限控制解析
Nov 09 #Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
Nuxt的动态路由和参数校验操作
Nov 09 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
ant design实现圈选功能
2019/12/17 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
基于Python List的赋值方法
2018/06/23 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
会计电算化实训报告
2014/11/04 职场文书
欠款起诉书范文
2015/05/19 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书