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

ゞ浴缸里的玫瑰 2023-01-16 09:44 105阅读 0赞

[分包打开失败率的现象][Link 1]

用户[点击元素][Link 1]进入分包后，如果分包下载失败，页面标题会正常显示，内容区会联系小程序的Logo和网络无法连接。底部有个重新加载按钮。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

[模拟分包打开失败的场景][Link 1]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]

[分包打开失败率的监控想法][Link 1]

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

监控指标图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]

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

监控字段说明

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

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'
        })
    }

[Link 1]: http://github.crmeb.net/u/defu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/b62f58222d8a4058941804294ebfee8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221022/3b29c84e71334ef88fa30373687b878b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]: /images/20221022/b3bc662d4f8541a992982af462a8e3c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]: /images/20221022/3db0ff370bca4ef68d4c57d04eae16ad.png