相信很多开发者朋友也知道：如果小程序插件只在某个分包中使用，无论从代码层面还是性能层面，插件放入分包都是最佳的解决办法。
然而像直播插件等公共插件应用多个功能页面，即有可能分布在多个分包。那么将小程序插件统一放入主包无疑是更优的处理方式。
面对体积较大的插件，有限的主包体积无法承载，开发者如何应对？下面我们将使用 **分包异步化 + 占位组件 **的方式将插件丝滑放入主包。
分包异步化
由于不同分包对应不同的下载单元，因此除了非独立分包能够依赖主包外，分包之间不能互相使用自定义组件或进行 require。
不过 分包异步化 可以允许通过一些配置和新的接口，使部分跨分包的内容能够等待下载后异步使用，从而一定程度上解决这个限制。
以往开发者直接在主包上引入公共插件，容易导致主包代码变多、性能减弱。现在我们可以通过 3 个步骤以分包异步化的方式引入插件，优化主包体积：
app.json 中修改插件的位置到 pkgPlugin 分包
在 pkgPlugin 分包创建 index.js，并导出插件实例
在对应页面通过 require 回调函数获取插件实例
👉 点击查看代码
// 1. app.json 中修改插件的位置到 pkgPlugin 分包
{
"root": "pkgPlugin",
"pages": ["pages/index/index",],
"plugins": {
"tencentVideo": {
"version": "1.4.7",
"provider": "wxa75efa648b60994b"
},
},
}
// 2. 在 pkgPlugin 分包创建 index.js，并导出插件实例
export const TxvContext = requirePlugin('tencentVideo');
// 3. 在对应页面获取插件实例
let tencentVideo = ''
require('../pkgPlugin/index', (TxvContext) => {
tencentVideo = TxvContext
}, (err) => {
// 获取失败的回调
})
占位组件
由于部分插件需要用到自身的自定义组件才能够完成渲染过程，因此开发者还需要引用自定义组件：
在插件页面的 json 文件引用自定义组件
将插件放入 wxml
👉 点击查看代码
"txv-video": "plugin://tencentVideo/video"
但是由于插件没有被放入主包，以上通过分包引用自定义组件的操作将会出现报错。这时候我们需要 占位组件！
分包引用自定义组件出现报错
为了使渲染过程不被阻塞，开发者可以使用占位组件进行渲染过程的占位。通过下面 3 个步骤即可实现占位组件的引用过程：
pkgPlugin 分包创建 component，完成初始化并且封装成 1 个组件
其他分包直接引用 pkgPlugin 组件，不直接引用插件的自定义组件
使用 componentPlaceholder 属性定义占位组件，保证渲染不会被阻塞
👉 点击查看代码
// 1. pkgPlugin 分包创建 component，完成初始化并且封装成 1 个组件
<txv-video
vid="{{vid}}"
bindplay="bindPlayVideo"
// 插件的props
/>
{
"component": true,
"usingComponents": {
"txv-video": "plugin://tencentVideo/video"
}
}
// 2. 其他分包直接引用 pkgPlugin 组件，不直接引用插件的自定义组件
"usingComponents": {
"txv-video": "/pkgPlugin/components/index"
},
// 3. 使用 componentPlaceholder 属性定义占位组件，保证渲染不会被阻塞
"componentPlaceholder": {
"txv-video": "view:
}
通过上述操作，我们重新封装自定义组件，并且使用占位组件的方式进行引用，完美解决插件不在对应分包也能正常引用自定义组件的情况。
面对公共插件应用在多个分包的情况，开发者可以尝试使用 分包异步化 + 占位组件 的方式，实现将小程序插件放入主包，但不占用主包体积的效果。
