小程序分包 - 簡書

1.簡介

我們在開發(fā)小程序的時候划咐，經(jīng)呈焓罚回遇到一個情況就是箱熬，當小程序比較完整类垦、功能比較完全的時候狈邑，會造成小程序包大小太大不能上傳(小程序包大小限制在2M以內)。
當我們使用一些第三方組件或者大量images的時候蚤认，包的大小米苹，很容易就會超過的，這個時候我們就可以使用分包的技術來實現(xiàn)包大小的限制
分包：
- 小程序將包分為砰琢，主包蘸嘶、分包、獨立分包三種
  - 主包：在app.json-->pages里面包含的page就是主包陪汽，以及包含app.js亏较、app.wxss等公共文件
  - 分包：在app.json-->subpackages里面包含的page就是分包
  - 獨立分包：在app.json-->subpackages里面包含的page就是分包，屬性independent為true的分包
- 分包也遵循小程序包的限制的掩缓，每個分包也是不能超過2M的，但是整個小程序是不可以超過16M的遵岩，是不是也有點淡淡的憂傷你辣，但是比較與2M會好很多
使用分包以后，我們就可以將不同的模塊使用一個分包尘执，將公共的一些配置方式以及請求什么的寫入主包舍哄，從而來釋放主包的大小
缺點：
- 分包用戶第一次從主包跳進分包時候才開始下載，此時會有一定的延遲
  - 但也是可以使用分包預下載來避免誊锭，但是預下載也是有大小限制的2M表悬，后面會詳細介紹
- 分包對主包依賴比較大，如果你需要打開分包丧靡，那么就會先下載主包蟆沫，再下載分包，從而顯示界面
  - 但是可以使用獨立主包解決温治，但是獨立主包實獲取不到app實例,饭庞，因為此時主包并沒有下載
微信分包文檔

2.使用分包

我們可以在項目任意的路徑下面創(chuàng)建我們的分包文件夾以及對應的page

當我們使用分包的時候，我們需要在app.json文件下面使用subpackages設置我們的分包信息

"subpackages": [
  # 每個對象表示一個分包
    {
      "name": "packagesA",# 表示此分包的名稱
      "root": "pages1/",# 分包的路徑
      "pages": [# 分包里面包含的頁面熬荆，
        "cat/index"
      ]
    },
    {
      "root": "pages2/",
      "pages": [
        "dog/index"
      ],
      "independent": true # 表示此包是否實獨立分包
    }
  ]

注意：root路徑加上pages里面的頁面路徑剛好就是分包頁面的路徑不要寫錯

3.獨立分包

當我們在分包的對象里面舟山。將independent設置為true的分包，將是個主包

分包	獨立分包
不可以單獨發(fā)包卤恳，需要依賴與主包	可以單獨累盗，發(fā)包，不需要依賴與主包
可以在頁面內突琳，getApp() 會獲取到app對象	不可以在頁面內若债，獲取到app對象，只有跳轉到主包后本今，主包下載完成時拆座，才能獲取到app對象
可以引入主包的wxss樣式	不可以使用主包的wxss樣式

關于getApp
- 因為獨立主包不依賴于主包主巍，所以我們通過getApp獲取不到app對象，但是我們可以通過allowDefault = true設置一個默認值挪凑，當主包下載完成后孕索，會將我們設置的數(shù)據(jù)同步到app對象里面
- 獨立分包
```
const app = getApp({allowDefault : true})
app.token = "123"
```
- 主包
```
const app = getApp()
console.log(app.token) // 123
```
生命周期
- 我們不可能在app.js，里面使用onLaunch躏碳、onShow方法監(jiān)聽小程序的生命周期搞旭，但是我們可以使用wx.onAppHide、wx.onAppShow來監(jiān)聽

4.分包預加載

當我們使用分包來發(fā)布應用的時候菇绵，默認情況當?shù)谝淮螐闹靼D到分包頁面時候肄渗，才會開始下載，這樣就會給用戶造成一個卡頓的現(xiàn)象咬最。

如果想解決這樣的問題翎嫡，我們可以使用預加載，當用戶加載到A界面的時候永乌，我們可以再此時預下載分包的頁面B惑申，那么等用戶跳轉到頁面B的時候會流暢很多

默認情況

graph TD;
主包A界面 --> Button --> 下載分包頁面A --> 顯示分包頁面A

預加載

graph TD;
主包界面B --> 下載分包頁面A
主包界面B --> button按鈕點擊 --> 顯示分包頁面A

預加載使用，我們需要在app.js下面使用preloadRule配置預加載規(guī)則翅雏，預加載規(guī)則只支持配置的原則圈驼，不支持api調用配置

"preloadRule": {
  # 當加載到pages/index/index頁面的時候，在網(wǎng)絡實wifi時會預加載packagesA包
    "pages/index/index": {
          "network": "wifi", # 網(wǎng)絡環(huán)境時wifi時才會加載包packagesA
      "packages": ["packagesA"] # packages 預下載那個包望几，那個界面
    },
    "pages2/dog/index": {
      "packages": ["__APP__"] # __APP__ 表示主包
    }
  },

注意：以上所有獨立分包通過getApp獲取app對象獲取不到的前提為：沒有加載過主包的情況下

Demo app.json配置

{
  "pages": [
    "pages/index/index"
  ],
  "subpackages": [
    {
      "name": "packagesA",
      "root": "pages1/",
      "pages": [
        "cat/index"
      ]
    },
    {
      "root": "pages2/",
      "pages": [
        "dog/index"
      ],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "packages": ["packagesA"]
    },
    "pages2/dog/index": {
      "packages": ["__APP__"]
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

image.png