# 分包異步化
在小程序中，不同的分包對應(yīng)不同的下載單元；因此，除了非獨(dú)立分包可以依賴主包外，分包之間不能互相使用自定義組件或進(jìn)行 require?！阜职惒交固匦詫⒃试S通過一些配置和新的接口，使部分跨分包的內(nèi)容可以等待下載后異步使用，從而一定程度上解決這個(gè)限制。
# 兼容性
該特性需要基礎(chǔ)庫版本 2.11.2 或以上，使用該特性的小程序在 2.11.2 以下的基礎(chǔ)庫上可能無法工作，如果發(fā)布正式版本，可以考慮將最低基礎(chǔ)庫版本設(shè)置為 2.11.2 或以上。
點(diǎn)擊展開各平臺最低支持版本：
- 安卓微信：7.0.13
- iOS 微信：7.0.12
- 微信開發(fā)者工具：1.05.2104272
- PC 微信：3.4.5
- macOS 微信：3.4.1
- 安卓企業(yè)微信：3.1.23
- iOS 企業(yè)微信：4.0.8
# 跨分包自定義組件引用
一個(gè)分包使用其他分包的自定義組件時(shí)，由于其他分包還未下載或注入，其他分包的組件處于不可用的狀態(tài)。通過為其他分包的自定義組件設(shè)置 占位組件，我們可以先渲染占位組件作為替代，在分包下載完成后再進(jìn)行替換。例如：
// subPackageA/pages/index.json
{
"usingComponents": {
"button": "../../commonPackage/components/button",
"list": "../../subPackageB/components/full-list",
"simple-list": "../components/simple-list",
"plugin-comp": "plugin://pluginInSubPackageB/comp"
},
"componentPlaceholder": {
"button": "view",
"list": "simple-list",
"plugin-comp": "view"
}
}
在這個(gè)配置中，button 和 list 兩個(gè)自定義組件是跨分包引用組件，其中 button 在渲染時(shí)會(huì)使用內(nèi)置組件 view 作為替代，list 會(huì)使用當(dāng)前分包內(nèi)的自定義組件 simple-list 作為替代進(jìn)行渲染；在這兩個(gè)分包下載完成后，占位組件就會(huì)被替換為對應(yīng)的跨分包組件。
在基礎(chǔ)庫 2.24.3 之后，可以使用 wx.onLazyLoadError 監(jiān)聽加載事件。
# 跨分包 JS 代碼引用
一個(gè)分包中的代碼引用其它分包的代碼時(shí)，為了不讓下載阻塞代碼運(yùn)行，我們需要異步獲取引用的結(jié)果。如：
// subPackageA/index.js
// 使用回調(diào)函數(shù)風(fēng)格的調(diào)用
require('../subPackageB/utils.js', utils => {
console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 風(fēng)格的調(diào)用
require.async('../commonPackage/index.js').then(pkg => {
pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
在其它分包中的插件也可以通過類似的方法調(diào)用：
// 使用回調(diào)函數(shù)風(fēng)格的調(diào)用
requirePlugin('live-player-plugin', livePlayer => {
console.log(livePlayer.getPluginVersion())
}, ({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 風(fēng)格的調(diào)用
requirePlugin.async('live-player-plugin').then(livePlayer => {
console.log(livePlayer.getPluginVersion())
}).catch(({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
詳情可參考 require 文檔