# Subcontract asynchrony

In the Mini Program, different sub-packages correspond to different download unitsTherefore, except for dependent sub-packages that can rely on the master package, sub-packages cannot use custom components with each other or perform custom sub-packages with each other. Require。Subcontract asynchronyThe feature will address this limitation to some extent by allowing some configuration and new interfaces so that some of the cross-subcontracted content can wait to be downloaded and consumed asynchronously.

{% Minicode ('6AYlPZmm7csW') %}

# compatibility

This feature requires the base library version 2.11.2 Or above, the Mini Program that uses this feature is used in the 2.11.2 The following base libraries may not work. If you release the official version, consider setting the minimum base library version to 2.11.2 Or more.

# Custom component references across sub-packages

When one subcontract uses a custom component from another subcontract, the other subcontract is unavailable because the other subcontract has not been downloaded or injected. By setting up custom components for other sub-packages Placeholder component, we can render the placeholder component as an alternative and replace it after the sub-download is complete. 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,button and list The two custom components are cross-subcontract reference components in which button Built-in components are used during rendering view As an alternative,list Will use custom components within the current subcontract simple-list Render as an alternativeAfter the two sub-packages are downloaded, the placeholder component is replaced with the corresponding cross-subcontract component.

In the base library 2.24.3 Later, you can use the wx.onLazyLoadError Listen to load events.

# Cross-sub-packageing JS Code References

When code in one subcontract refers to code in another subcontract, we need to get the result of the reference asynchronously in order not to block the download from running. Such as:

// subPackageA/index.js
// Calls using callback function style
Require('../subPackageB/utils.js', utils => {
  console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// Or use Promise Call of Style
require.async('../commonPackage/index.js').then(pkg  => {
  pkg.getPackage () // 'common'
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

Plug-ins in other sub-packages can be called in a similar way:

// Calls using callback function style
requirePlugin('live-player-plugin', livePlayer => {
  console.log(livePlayer.getPluginVersion())
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// Or use Promise Call of Style
requirePlugin.async('live-player-plugin').then(livePlayer => {
  console.log(livePlayer.getPluginVersion())
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

Details can be found Require file