摘要：開發者需要將小程序劃分成不同的子包，在構建時打包成不同的分包，用戶在使用時按需進行加載。從獨立分包中頁面進入小程序時，不需要下載主包，當小程序進入不同分包的時候，主包才會被下載。

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

在構建小程序分包項目時，構建會輸出一個或多個分包。每個使用分包小程序必須包含

一個主包，所謂的主包，即放置默認啟動頁/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 中，每個分包的配置有以下幾項：

打包原則

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 是進入此頁面的 預下載配置，每個配置都

有以下幾項。　

限制

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

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

結語

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