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 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
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
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python文件写入实例分析
2015/04/08 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python更换pip源方法过程解析
2020/05/19 Python
python3跳出一个循环的实例操作
2020/08/18 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Java面试题及答案
2012/09/08 面试题
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
网页美工求职信
2014/02/15 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
教师职位说明书
2014/07/29 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
详解Python常用的魔法方法
2021/06/03 Python
Redis Stream类型的使用详解
2021/11/11 Redis
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL