uni-app 之使用分包——起源於微信錯誤碼——800051

故事起源

最近一直在用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