探究微信小程序分包打开失败率技术方案

分包打开失败率的现象

用户点击元素进入分包后，如果分包下载失败，页面标题会正常显示，内容区会联系小程序的Logo和网络无法连接。底部有个重新加载按钮。

模拟分包打开失败的场景

step1: 手机配置好代理，能通过 charles(mac环境) 拦截手机的网络请求
step2: 重置环境，删除手机里的微信小程序的各个版本(开发版、体验版、线上版)
step3: 通过微信小程序助手，打开开发版(或者体验版)的小程序，开启调试模式
step4: 再次访问小程序，charles 能看到手机的 http 请求
step5: 关闭 charles 工具，点击按钮进入分包页面(或者通过 vConsole 输入跳转代码也行)，能够正常进入分包页，但会出现分包加载失败
从代码层面看分包打开失败率

断开网络进入分包页面，分页页面的代码没有执行。

开启网络后，点击重新加载后，页面的 onLoad 被执行了，同时看到了 onLoad 代码里打印的 console。

分包打开失败率的监控想法

当用户打开分包失败时，分包的 onLoad 不会执行，但是 navigation 方法会正常返回结果，可以利用这个现象， 当页面路由跳转时，打点即为A，分包能正常触发 onLoad，打点为B，失败率 = (A - B) / A。

监控指标图如下：

在忽略上报埋点丢失的情况下，每一次新开分包（或页面）时，加载成功的话，uuid 和 page_name 联合查询的记录数量都是 2。

监控字段说明

uuid: uuid 唯一标识，每次调用官方提供的路由方法，都会生成一个
page_name: 要打开分页的页面路径(这里采用的是别名)
伪代码实现

step1: 调用 wx.redirection 打点A

// pages/main/index.js
wx.navigateTo({
    url: '/pages/user/authManager/index',
    success: (value) => {
        console.log('value:', value)
    },
    fail: (err) => {
        console.log('err:', err)
    },
    complete: (data) => {
        SendLog({
            eventName: 'A',
            uuid: '0916b840-69f5-11eb-96a2-0385783e8b01',
            page_name: 'authManager'
        })
        console.log('data:', data)
    }
})

step2: 页面 onLoad 打点 B

// pages/user/authManager/index.js
onLoad() {
    SendLog({
        eventName: 'B',
        uuid: '0916b840-69f5-11eb-96a2-0385783e8b01',
        page_name: 'authManager'
    })
}