# Asynchronization of sub-packageing

In Weixin Mini Program, different sub-packages correspond to different download units; Therefore, sub-packages cannot use custom components or require`from each other, except that dependent sub-packages may rely on the master package. The "subcontract asynchronization" feature will address this limitation to some extent by allowing some configurations and new interfaces to allow content across sub-packages to be used asynchronously after download.

Preview with Developer Tool

# compatibility

This feature requires the base library version {% version (2.11.2)%} or above,Weixin Mini Program that uses this feature may not work on base libraries below 2.11.2. If a formal release is released, consider setting the minimum base library version to 2.11.2 or above.

Click to expand the minimum support version for each platform:

Android WeChat: 7.0.13
iOS WeChat ：7.0.12
WeChat Developer Tools: 1.05.2104272
PC WeChat ：3.4.5
macOS WeChat ：3.4.1
Android Enterprise WeChat: 3.1.23
IOS Enterprise WeChat: 4.0.8

# Custom component references across subpackages

When a subpackage uses a custom component of another subpackage, the components of the other subpackage are unavailable because the other subpackages have not yet been downloaded or injected.By setting the placeholder component for the custom components of another subpackage, we can render the placeholder component as a replacement and replace it once the subpackage is downloaded.For example:

// 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"
  }
}

In this configuration, thebuttonAndlisttwo custom components are cross-subpack reference components, wherebuttonuses the built-in componentview when rendering]]In lieu oflistrenders using the custom componentsimple-listwithin the current subpackage;After the download of these two subpackages is complete, the occupied component is replaced with the corresponding cross-subpackage component.

After the base library2.24.3, you can use wx.onLazyLoadError listens to load events.

# Cross-Subcontract JS Code Reference

When code in one subpackage refers to code in another subpackage, we need to fetch the result of the reference asynchronously in order to prevent the download from blocking the code. Examples include:

// subPackageA/index.js
// Use callback function style calls
require('../subPackageB/utils.js', utils => {
  console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// Or use a Promise-style call
require.async('../commonPackage/index.js').then(pkg => {
  pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

Plugins in other subpackages can also be called in a similar way:

// Use callback function style calls
requirePlugin('live-player-plugin', livePlayer => {
  console.log(livePlayer.getPluginVersion())
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// Or use a Promise-style call
requirePlugin.async('live-player-plugin').then(livePlayer => {
  console.log(livePlayer.getPluginVersion())
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

Details can be found in require documentation