从主包到分包，小程序插件的优雅引用方式
微信团队约 3 分钟相信很多开发者朋友也知道：如果小程序插件只在某个分包中使用，无论从代码层面还是性能层面，插件放入分包都是最佳的解决办法。
然而像直播插件等公共插件应用多个功能页面，即有可能分布在多个分包。那么将小程序插件统一放入主包无疑是更优的处理方式。
面对体积较大的插件，有限的主包体积无法承载，开发者如何应对？下面我们将使用 分包异步化 + 占位组件 的方式将插件丝滑放入主包。
分包异步化
由于不同分包对应不同的下载单元，因此除了非独立分包能够依赖主包外，分包之间不能互相使用自定义组件或进行 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-videovid="{{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:}
通过上述操作，我们重新封装自定义组件，并且使用占位组件的方式进行引用，完美解决插件不在对应分包也能正常引用自定义组件的情况。
面对公共插件应用在多个分包的情况，开发者可以尝试使用 分包异步化 + 占位组件 的方式，实现将小程序插件放入主包，但不占用主包体积的效果。
如有更多关于小程序的问题，可在 小程序交流专区 发帖互动，技术专员将为大家解答及进行深度交流。
原创｜腾讯前端开发工程师 zelmazhou