小程式分包載入
開發者需要將小程式劃分成不同的子包，在構建時打包成不同的分包，使用者在使用時按需進行載入。
在構建小程式分包專案時，構建會輸出一個或多個分包。每個使用分包小程式必須包含
一個主包，所謂的主包，即放置預設啟動頁/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
ackageA 無法使用 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
}//歡迎加入全棧開發交流圈一起學習交流：582735936
]//面向1-3年前端人員
} //幫助突破技術瓶頸，提升思維能力
限制：
獨立分包屬於分包的一種，普通分包的所有限制獨立分包有效。獨立分包中外掛
自定義元件的處理方式同普通分包。
使用獨立分包需要注意：
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__"]
}//歡迎加入全棧開發交流圈一起學習交流：582735936
}//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力
preloadRule 中，key 是頁面路徑， value 是進入此頁面的 預下載配置，每個配置都
有以下幾項。
小程式分包載入
限制
同一個分包中的頁面享有共同的預下載大小限額2M，會在工具打包時校驗。
如：頁面A 和頁面B 都在同一個分包中，A 中預下載大小為0.5 M的分包，
B 中最大多隻能預下載大小1.5 的分包。
結語
歡迎加入全棧開發交流
感謝您的觀看，如有不足之處，歡迎批評指正**瞭解更多**