paages.json 用於uni-app的全域性配置，決定頁面檔案的路徑、視窗樣式、原生的導航欄、底部的原生tabbar 等。類似於微信小程式的app.json頁面管理部分。由於各個小程式平臺的限制和優化啟動速度。所以，我們可能需要用到分包機制——例如，在微信小程式中生成的單個包大於2M時，是不能上傳的。

所以，我們使用subPackges和preLoadRule進行分包。

subPackages

定義

• 分包載入配置，此配置為小程式的分包載入機制。
• 因小程式有體積和資源載入限制，各家小程式平臺提供了分包方式，優化小程式的下載和啟動速度。
• 分包相對於主包。主包，即放置預設啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 指令碼；而分包
  則是根據pages.json的配置進行劃分。
• 在小程式啟動時，預設會下載主包並啟動主包內頁面，當用戶進入分包內某個頁面時，會把對應分包自動下載下來，下載完成後再進行展示。此時終端介面會有等待提示。
• App預設為整包。從uni-app 2.7.12+ 開始，也相容了小程式的分包配置。其目的不用於下載提速，而用於首頁是vue時的啟動提速。App下開啟分包，除在pages.json中配置分包規則外，還需要在manifest中設定在app端開啟分包設定，詳見：https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

引數說明

subPackages 節點接收一個數組，陣列每一項都是應用的子包，其屬性值如下：

pages引數說明

pages節點配置應用由哪些頁面組成，pages節點接收一個數組，陣列每項都是一個物件，其屬性如下：

注意事項

• subPackages 的pages路徑時相對於root 下的路徑，不是全路徑。
• 微信小程式每個分包的大小是2M，總體積一共不能超過20M。
• 百度小程式的每個分包的大小時2M,總體積一共不超過8M。
• 支付寶小程式每個分包的大小是2M，總體積一共不超過8M。
• QQ小程式每個分包的大小是2M，總體積一共不超過24M。
• 位元組小程式每個分包的大小是2M，總體積一共不能超過16M（位元組小程式基礎庫 1.88.0 及以上版本開始支援，位元組小程式開發者工具請使用大於等於 2.0.6 且小於 3.0.0 的版本）。
• 分包下支援獨立的 static 目錄，用來對靜態資源進行分包。
• uni-app 內支援微信小程式、QQ小程式、百度小程式、支付寶小程式、位元組小程式(HBuilderX 3.0.3+)分包優化，即將靜態資源或者js檔案放入分包內不佔用主包大小。詳情請參考：關於分包優化的說明
• 針對vendor.js 過大的情況，可以使用執行時壓縮程式碼。
  • HBuilderX建立的專案勾選執行-->執行到小程式模擬器-->執行時是否壓縮程式碼
  • cli建立的專案可以在package.json中新增引數--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

使用方法

假設分包支援的uni-app目錄結構如下:

─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        

則需要在pages.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"]
        }
    }
}

這裡preloadRule 表示分包預配置。提升後續分包頁面時的啟動速度。

preloadRule

定義

preloadRule表示分包預配置。

配置preloadRule後，在進入小程式某個頁面時，由框架自動預下載可能需要的分包，提升進入後續分包頁面時的啟動速度。

語法

 "preloadRule":{key : value }

引數說明

key 表示頁面路徑，value 是進入頁面的預下載配置。每個配置項包含的引數如下：

app的分包，同樣支援preloadRule，但網路規則無效。

參考網址

• pages.json : https://uniapp.dcloud.io/collocation/pages?id=preloadrule