uni-app 之使用分包——起源于微信错误码——800051

军哥哥傻乎乎 · 发表于 2021-9-15 19:41:00

故事起源

最近一直在用uni-app开发微信小程序。良久没有真机调试和发布。一步小心，居然发现它错了。

message：Error: 系统错误，错误码：80051,source size 2169KB exceed max limit 2MB [20210915 14:30:39][wxe41256ffb86e9b9c]

原来小程序有体积和资源加载限制。在微信小程序中，每个包不能超过2M,总计不能超过20M。好吧，原来，叫小程序真的有原因的。2169K > 2M。话说，这里的2M是2048K还是2000K ?

然后，我顺着思路用了两种方法，这里就不详细叙述了。方法一，压缩公共资源。结果，还是太大了。第二步，把图片转换为网络的，小程序里只是引用。然而……

所以，我的项目中，公共资源似乎并不多。

这两个是不成熟的方法，不能更大程度上的解决问题。本来处在临界状态，一直会战战兢兢、如履薄冰。这个方法，月光族月末时的勤俭节约。可以，月光族节俭一段时间后，会空间充裕，而小程序包却不能。还好，有另一条路——分包。

解决方法：分包

假设支持分包的目录结构如下：

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json

则需要在pack.json中填写：

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    " subPackages ": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

这里的 subPackages 表示分包加载配置，此配置为小程序的分包机制，

preloadRule 表示分包预配置，配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

嗯，这个方法可用。不过，我知道的太晚，有好多页面地方要改路径——枯了！看来，我的代码有待优化。

关于pages.json的配置可以查看官网的说明，当然，我也誊写了官网的说明。

参考网址

uniapp如何分包 & 分包配置后无法读取static文件夹: https://blog.csdn.net/m0_46442996/article/details/116207284
subPackages :https://uniapp.dcloud.io/collocation/pages?id=subpackages

uni-app 之使用分包——起源于微信错误码——800051

故事起源

解决方法 ： 分包

参考网址

解决方法：分包