uni-app開發經驗分享十四：小程序超過2M限制的方法——分包加載

 

起初小程序上線時，微信限制了代碼包不能超過1MB，後來功能變大變成了2M了，限制大小是出於對小程序啓動速度的考慮，
但願用戶在使用任何一款小程序時，都能得到一種「秒開」體驗。可是，2MB也限制了小程序功能的擴展，小程序業務的發展
可能須要更大的體積。爲了解決這個問題，微信推出了—分包加載。

小程序分包加載

對小程序進行分包，能夠優化小程序首次啓動的下載時間，以及在多團隊共同開發時能夠更好的解耦協做。

目錄結構：

├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── my
├── packageB
│ └── list
├── pages
│ ├── index
│ └── logs
└── utils

開發者經過在 app.json subpackages或subPackages 字段聲明項目分包結構：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "my"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "list"
      ]
    }
  ]
}

分包預下載

開發者能夠經過配置，在進入小程序某個頁面時，由框架自動預下載可能須要的分包，提高進入後續分包頁面時的啓動速度。對於獨立分包，也能夠預下載主包。
分包預下載目前只支持經過配置方式使用，暫不支持經過調用API完成。

配置方法

預下載分包行爲在進入某個頁面時觸發，經過在 app.json 增長 preloadRule 配置來控制

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "sub1",
      "name": "hello",
      "pages": ["index"],
    },
    {
      "root": "sub2",
      "pages": ["index"],
    }
  ],
  "preloadRule": {
    "sub1/index": {
      "packages": ["__APP__"]
    },
    "sub2/index": {
      "packages": ["hello"]
    }
  }
}

preloadRule 中，key 是頁面路徑，value 是進入此頁面的預下載配置，每一個配置有如下幾項：

字段	類型	必填	默認值	說明
packages	StringArray	是	無	進入頁面後預下載分包的 root 或 name。__APP_表示主包。
network	String	否-	wifi	在指定網絡下預下載，可選值爲：all: 不限網絡，wifi: 僅wifi下預下載

打包原則

聲明 subpackages 後，將按 subpackages 配置路徑進行打包，subpackages 配置路徑外的目錄將被打包到 app（主包） 中tabBar 頁面必須在 app（主包）內

分包加載的低版本兼容

由微信後臺編譯來處理舊版本客戶端的兼容，後臺會編譯兩份代碼包，一份是分包後代碼，另一份是整包的兼容代碼。 新客戶端用分包，老客戶端仍是用的整包，完整包會把各個 subpackage 裏面的路徑放到 pages 中。