从主包到分包，小程序插件的优雅引用方式

相信很多开发者朋友也知道：如果小程序插件只在某个分包中使用，无论从代码层面还是性能层面，插件放入分包都是最佳的解决办法。

然而像直播插件等公共插件应用多个功能页面，即有可能分布在多个分包。那么将小程序插件统一放入主包无疑是更优的处理方式。

面对体积较大的插件，有限的主包体积无法承载，开发者如何应对？下面我们将使用 **分包异步化 + 占位组件 **的方式将插件丝滑放入主包。

分包异步化

由于不同分包对应不同的下载单元，因此除了非独立分包能够依赖主包外，分包之间不能互相使用自定义组件或进行 require。

不过 分包异步化 可以允许通过一些配置和新的接口，使部分跨分包的内容能够等待下载后异步使用，从而一定程度上解决这个限制。

以往开发者直接在主包上引入公共插件，容易导致主包代码变多、性能减弱。现在我们可以通过 3 个步骤以分包异步化的方式引入插件，优化主包体积：

1. app.json 中修改插件的位置到 pkgPlugin 分包

2. 在 pkgPlugin 分包创建 index.js，并导出插件实例

3. 在对应页面通过 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) => {
    // 获取失败的回调
})

占位组件

由于部分插件需要用到自身的自定义组件才能够完成渲染过程，因此开发者还需要引用自定义组件：

1. 在插件页面的 json 文件引用自定义组件

2. 将插件放入 wxml

👉 点击查看代码

"txv-video": "plugin://tencentVideo/video"

但是由于插件没有被放入主包，以上通过分包引用自定义组件的操作将会出现报错。这时候我们需要 占位组件！

13396d95b9c8b6b45ff1358ae10fa51f.png

分包引用自定义组件出现报错

为了使渲染过程不被阻塞，开发者可以使用占位组件进行渲染过程的占位。通过下面 3 个步骤即可实现占位组件的引用过程：

1. pkgPlugin 分包创建 component，完成初始化并且封装成 1 个组件

2. 其他分包直接引用 pkgPlugin 组件，不直接引用插件的自定义组件

3. 使用 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:
 }

通过上述操作，我们重新封装自定义组件，并且使用占位组件的方式进行引用，完美解决插件不在对应分包也能正常引用自定义组件的情况。

面对公共插件应用在多个分包的情况，开发者可以尝试使用 分包异步化 + 占位组件 的方式，实现将小程序插件放入主包，但不占用主包体积的效果。