小程式分包載入

前端愛好者發表於2018-11-11

開發者需要將小程式劃分成不同的子包，在構建時打包成不同的分包，使用者在使用時按需進行載入。

在構建小程式分包專案時，構建會輸出一個或多個分包。每個使用分包小程式必須包含

一個主包，所謂的主包，即放置預設啟動頁/TabBar 頁面，以及一些所有分包需要用到

整個小程式所有分包大小不超過 8M單個分包/主包大小不能超2M

對小程式進行分包，可以優化小程式首次啟動的下載時間，以及在多團隊共同開發時可以更高的解耦協作。

配置方法：

假設支援分包的小程式目錄結構

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

開發者通過在 app.json subPackages 欄位宣告專案分包結構：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subPackages 中，每個分包的配置有以下幾項：

欄位 型別 說明
root String 分包根目錄
name String 分包別名，分包預下載時可以使用
pages StringArray 分包頁面路徑，相對與分包根目錄
independent Boolean 分包是否是獨立分包

打包原則

1.宣告 subPackages 後，將按 subPackages 配置路徑進行打包，subPackages 配置路徑外的目

2.錄將被打包到 app（主包） 中

3.app（主包）也可以有自己的 pages（即最外層的 pages 欄位）

4.subPackage 的根目錄不能是另外一個 subPackage 內的子目錄

5.tabBar 頁面必須在 app（主包）內

引用原則

  • packageA 無法 require packageB JS 檔案，但可以 require app、自己 package 內的 JS 檔案
  • packageA 無法 import packageB 的 template，但可以 require app、自己 package 內的 template
  • packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內的資源

獨立分包

  • 獨立分包是小程式的一種特殊型別的分包，可以獨立於主包和其他分包獨立執行。從獨立
  • 分包中頁面進入小程式時，不需要下載主包，當小程式進入不同分包的時候，主包才會被下載。
  • 可發者可以按需將某些具有一定功能獨立性的頁面配置到獨立分包中。當小程式從普通的
  • 分包頁面中啟動時，需要首先下載主包；而獨立分包不依賴主包即可執行，可以很大程度上
  • 提升分包頁面的啟動速度， 一個小程式中可以有多個獨立分包。

配置方法：

　　假設小程式的目錄如下；

　├── app.js
　　├── app.json
　　├── app.wxss
　　├── moduleA
　　│   └── pages
　　│       ├── rabbit
　　│       └── squirrel
　　├── moduleB
　　│   └── pages
　　│       ├── pear
　　│       └── pineapple
　　├── pages
　　│   ├── index
　　│   └── logs
　　└── utils

　開發者可以通過在 app.json 的 subpackages 欄位中的分包配置中自定義 independent

　　欄位宣告對應分包為獨立分包

{
  　　  "pages": [
   　　 　　"pages/index",
    　　　　"pages/logs"
  　　　　],
  　　　"subpackages": [
    　　　　{
      　　　　"root": "moduleA",
     　　　　 "pages": [
        　　　　"pages/rabbit",
       　　　　 "pages/squirrel"
      　　　　]
    　　　　}, {
      　　　　"root": "moduleA",
      　　　　"pages": [
        　　　　"pages/pear",
        　　　　"pages/pineapple"
      　　　　],
      　　"independent": true

限制：

　　獨立分包屬於分包的一種，普通分包的所有限制獨立分包有效。獨立分包中外掛

　　自定義元件的處理方式同普通分包。

使用獨立分包需要注意：

1.獨立分包中不能依賴主包和其他分包中的內容，包括js 檔案，template,
2.wxss,自定義元件，外掛等，主包的app.wxss 對獨立分包無效。應避免在
3.獨立分包頁面中使用 app.wxss 中的樣式。
4.App 只能在主包中定義，獨立分包中不能定義 App 會造成無法預期的行為。
5.獨立分包中暫時不支援使用外掛。

注意事項：
（1） 關於 getApp()

　　　　與普通分包不同，獨立分包執行時，App 並不一定被註冊，因此，getApp()

　　　　也不一定獲得App 物件，

　　　　當使用者從獨立分包頁面啟動小程式時，主包不存在，App 也不存在，此時呼叫

　　　　getApp 獲取到的是undefined 。當使用者進入普通分包或者主包時，主包才會

被下載， App 才會被註冊。

　　　　當使用者從普通分包或者主包的頁面挑到獨立分包的時候，主包已經存在，此時

　　　　呼叫getApp(),才能獲得真正的App。

為了滿足獨立分包中的這一需求，基礎庫2.2.4 版本開始getApp 支援，
allowDefault 引數，在 App 未定義的時候返回一個預設實現。當主包

載入 App 被註冊的時候，預設實現中被定義的屬性會被合併覆蓋到預設的App 中。

　　示例：

const  app = getApp({allowDefault:true}) 
　　　　　　app.data = 456
　　　　　　app.global = {}
 　　　　.app.js  中
　　　　　　App({
　　　　　　　　data:12
　　　　　　　　other:`hello
　　　　　　})                                                                    
　console.log(getApp())   // {global: {} ,data: 456,other: `hello`}

（2） 關於 App 的生命週期

　　　　當從獨立分包中啟動小程式時，主包的中的onLanch 和首次 onShow 會從

　　　　 獨立分包頁面首次進入主包或普通分包頁面時呼叫。

分包下載：

　　開發者可以通過配置，在進入小程式某個頁面時，由框架自動預下載可需要的分包。

　　提升進入後續分包頁面的速度，對於獨立分包，可以預下載主包。

配置方法：

　　預下載分包行為在進入某個頁面的時候觸發，在通過app.json 增加 preloadRule

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]

　preloadRule 中，key 是頁面路徑， value 是進入此頁面的 預下載配置，每個配置都

有以下幾項。　

欄位 型別 必填 預設值 說明
packages StringArray 是 無 進入頁面後預下載分包的 root 或 name。__APP__ 表示主包。
network String 否 WiFi 在指定網路下預下載，可選值為：all: 不限網路 wifi: 僅wifi下預下載

限制

　 同一個分包中的頁面享有共同的預下載大小限額2M，會在工具打包時校驗。

如：頁面A 和頁面B 都在同一個分包中，A 中預下載大小為0.5 M的分包，

B 中最大多隻能預下載大小1.5 的分包。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

相關文章