故事起源

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