摘要：開發(fā)者需要將小程序劃分成不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在使用時(shí)按需進(jìn)行加載。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí)，不需要下載主包，當(dāng)小程序進(jìn)入不同分包的時(shí)候，主包才會(huì)被下載。

開發(fā)者需要將小程序劃分成不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在使用時(shí)按需進(jìn)行加載。

在構(gòu)建小程序分包項(xiàng)目時(shí)，構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必須包含

一個(gè)主包，所謂的主包，即放置默認(rèn)啟動(dòng)頁(yè)/TabBar 頁(yè)面，以及一些所有分包需要用到

整個(gè)小程序所有分包大小不超過 8M單個(gè)分包/主包大小不能超2M

對(duì)小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間，以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更高的解耦協(xié)作。

配置方法：

假設(shè)支持分包的小程序目錄結(jié)構(gòu)

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

開發(fā)者通過在 app.json subPackages 字段聲明項(xiàng)目分包結(jié)構(gòu)：

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

subPackages 中，每個(gè)分包的配置有以下幾項(xiàng)：

打包原則

1.聲明 subPackages 后，將按 subPackages 配置路徑進(jìn)行打包，subPackages 配置路徑外的目

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

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

4.subPackage 的根目錄不能是另外一個(gè) subPackage 內(nèi)的子目錄

5.tabBar 頁(yè)面必須在 app（主包）內(nèi)

引用原則

packageA 無法 require packageB JS 文件，但可以 require app、自己 package 內(nèi)的 JS 文件

packageA 無法 import packageB 的 template，但可以 require app、自己 package 內(nèi)的 template

packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源

獨(dú)立分包

獨(dú)立分包是小程序的一種特殊類型的分包，可以獨(dú)立于主包和其他分包獨(dú)立運(yùn)行。從獨(dú)立

分包中頁(yè)面進(jìn)入小程序時(shí)，不需要下載主包，當(dāng)小程序進(jìn)入不同分包的時(shí)候，主包才會(huì)被下載。

可發(fā)者可以按需將某些具有一定功能獨(dú)立性的頁(yè)面配置到獨(dú)立分包中。當(dāng)小程序從普通的

分包頁(yè)面中啟動(dòng)時(shí)，需要首先下載主包；而獨(dú)立分包不依賴主包即可運(yùn)行，可以很大程度上

提升分包頁(yè)面的啟動(dòng)速度， 一個(gè)小程序中可以有多個(gè)獨(dú)立分包。

配置方法：

　　假設(shè)小程序的目錄如下；

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

　開發(fā)者可以通過在 app.json 的 subpackages 字段中的分包配置中自定義 independent

　　字段聲明對(duì)應(yīng)分包為獨(dú)立分包

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

限制：

　　獨(dú)立分包屬于分包的一種，普通分包的所有限制獨(dú)立分包有效。獨(dú)立分包中插件

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

使用獨(dú)立分包需要注意：

1.獨(dú)立分包中不能依賴主包和其他分包中的內(nèi)容，包括js 文件，template,
2.wxss,自定義組件，插件等，主包的app.wxss 對(duì)獨(dú)立分包無效。應(yīng)避免在
3.獨(dú)立分包頁(yè)面中使用 app.wxss 中的樣式。
4.App 只能在主包中定義，獨(dú)立分包中不能定義 App 會(huì)造成無法預(yù)期的行為。
5.獨(dú)立分包中暫時(shí)不支持使用插件。

注意事項(xiàng)：
（1） 關(guān)于 getApp()

　　　　與普通分包不同，獨(dú)立分包運(yùn)行時(shí)，App 并不一定被注冊(cè)，因此，getApp()

　　　　也不一定獲得App 對(duì)象，

　　　　當(dāng)用戶從獨(dú)立分包頁(yè)面啟動(dòng)小程序時(shí)，主包不存在，App 也不存在，此時(shí)調(diào)用

　　　　getApp 獲取到的是undefined 。當(dāng)用戶進(jìn)入普通分包或者主包時(shí)，主包才會(huì)

被下載， App 才會(huì)被注冊(cè)。

　　　　當(dāng)用戶從普通分包或者主包的頁(yè)面挑到獨(dú)立分包的時(shí)候，主包已經(jīng)存在，此時(shí)

　　　　調(diào)用getApp(),才能獲得真正的App。

為了滿足獨(dú)立分包中的這一需求，基礎(chǔ)庫(kù)2.2.4 版本開始getApp 支持，
allowDefault 參數(shù)，在 App 未定義的時(shí)候返回一個(gè)默認(rèn)實(shí)現(xiàn)。當(dāng)主包

加載 App 被注冊(cè)的時(shí)候，默認(rèn)實(shí)現(xiàn)中被定義的屬性會(huì)被合并覆蓋到默認(rèn)的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） 關(guān)于 App 的生命周期

　　　　當(dāng)從獨(dú)立分包中啟動(dòng)小程序時(shí)，主包的中的onLanch 和首次 onShow 會(huì)從

　　　　 獨(dú)立分包頁(yè)面首次進(jìn)入主包或普通分包頁(yè)面時(shí)調(diào)用。

分包下載：

　　開發(fā)者可以通過配置，在進(jìn)入小程序某個(gè)頁(yè)面時(shí)，由框架自動(dòng)預(yù)下載可需要的分包。

　　提升進(jìn)入后續(xù)分包頁(yè)面的速度，對(duì)于獨(dú)立分包，可以預(yù)下載主包。

配置方法：

　　預(yù)下載分包行為在進(jìn)入某個(gè)頁(yè)面的時(shí)候觸發(fā)，在通過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 是頁(yè)面路徑， value 是進(jìn)入此頁(yè)面的 預(yù)下載配置，每個(gè)配置都

有以下幾項(xiàng)。　

限制

　 同一個(gè)分包中的頁(yè)面享有共同的預(yù)下載大小限額2M，會(huì)在工具打包時(shí)校驗(yàn)。

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

結(jié)語

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