小程序分包加载及可视化分析

小程序分包加载及可视化分析

1.为何要做分包加载

分包加载API见：

“https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html ”

在开发中，如果放在本地资源太大，导致编译出来的单包或主包会超过2M大小，这个原则在小程序端真机编译上是失败的，因此如果要发布上线，必须优化编译大小，一般两种方法：

1. 本地资源迁移网络资源，使用压缩js代替全量js
2. 如果1还是不行，可以尝试采用此处提到的分包

将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

切记主包必须包含首页TarBar页面，简单来说就是在主包中必须包含app.json里面的tabBar字段里面所有的页面。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

在做数据可视化分析时，小程序端是不支持js，但支持f2、echarts，如果不进行分包处理，很容易导致包大小超过2M，进而不可以发布上线，因此在我的小程序开发中，采用了此处的分包加载原则。

2.可视化分析

可视化分析，在小程序端同样可以做，目前比较主流的库有：F2、Echarts，而F2文档写的特别搓，Readme都编译不起来的，我尝试之后参考issue可解决，但是部分操作会受限，例如：PieLabel，在使用时出问题，因此便放弃了使用该库，采用Echarts，echarts微信版代码库如下：

“https://github.com/ecomfe/echarts-for-weixin ”

该库使用非常方便，文档写的也是相当不错，在懒加载的时候写起来也是蛮简单的，总体测评效果很棒，同时该仓库可导入微信小程序开发工具中直接看Demo，写的时候参考Demo，那开发效率杠杠的，不好点在于我们的逻辑是从数据库中拉数据，然后进行分析，那么必然存在异步问题，而这些Demo大多是基于同步或者假数据来的，同时ec-canvas所绑定的init函数是不支持异步操作的，因此要解决这一块问题需要采用懒加载方式，目前所使用的方法是在onLoad时，用一个异步函数进行封装，内部先拿到相应数据，再去做处理。

“本节完 ”