小程序压缩主包体积——分享落地统一化

前言

微信小程序主包体积不能超过2M，这样的话就必须严格控制哪些页面放主包，哪些页面放分包了。毕竟当业务复杂，小程序变成“大程序”，主包超出体积，都没办法提交代码。

在项目中，有时候由于初期考虑不周，把一些支持分享的页面放在了主包。如果这时候把它们从主包挪到分包，又或者因为前期的分包规则不合理，需要重新调整。文件路径发生了变化，原来的分享路径找不到页面导致出错。

解决方案

在主包加一个统一入口页面entryPage，所有支持分享的页面分享的路径path都是"/pages/entryPage/entryPage?actionID=xx&额外参数"，后面再拼接页面本身需要带的参数。其中actionID是页面的唯一标识，比如100001表示首页，100002表示个人中心页，这个id一旦定下来，就不能再修复（即重新定义）。

进入分享的链接"/pages/entryPage/entryPage?actionID=xx&额外参数"，即进入了entryPage页面，此时entryPage获取到actionID，再由actionID去匹配页面做转发，重定向到具体分享的页面。

风险

实施这个方案前，需要明确几点：

1. 针对旧有的已经分享出去的卡片&小程序码，会出现找不到页面的“阵痛”。需要用户重新发起分享，这样分享出去的链接就是"/pages/entryPage/entryPage?actionID=xx&额外参数"

2. 需提前与产品等多端确认，页面路径是否能改变，尤其是配置端、运营、后端、硬件端等多方的沟通，如果是印刷类的小程序码，即把码印刷在硬件上，短期内无法更换的，尽量不改动页面路径。这些都需要多方的沟通，以免出现问题。

收益

这个方案，可以把一些不太必要放主包的页面挪走，虽然会有阵痛（上述的风险点），但长期来看，一来可以降低主包体积，二是即使后续支持分享的页面再更换包路径（比如从分包A挪到分包B），也不影响外界，这时候就单纯是前端内部的技术优化。面向外部的分享链接始终是"/pages/entryPage/entryPage?actionID=xx&额外参数"

代码

app.json主包新增entryPage页面：

{
    "pages": [
        "pages/entryPage/entryPage"
    ],
}

entryPage.js关键代码

Page({
    /**
     * 处理actionObj，实施跳转
     * @param {*} action
     */
    handleAction(options) {
        if (!options) throw 'options为无效值';
        
        // 以下伪代码，建议单独抽出配置表
        let path = '';
        switch (options.actionID) {
            case 100001: {
                path = '商品页路径';
                break;
            }
            case 100002: {
                path = '个人页路径';
                break;
            }
            case 100003: {
                path = '设置页路径';
                break;
            }
            default: {
                path = '首页路径';
            }
        }
        
        // 组装actionID之外的参数
        let params = '';
        for (let key in options) {
            if (key !== 'actionID') {
                params += `&${key}=${options[key]}`;
            }
        }
        
        // 重定向到实际落地的页面
        wx.redirectTo({ url: `${path}?${params.slice(1)}` });
    },
    
    async onLoad(options) {
        try {
            this.handleAction(options);
        } catch (err) {
            console.warn('err ==>', err);
            // 解析options失败，回到首页
            wx.switchTab({
                url: '/pages/home/home',
            });
        }
    },
});