背景

我們一般使用小程序插件的時(shí)候，喜歡將其放在分包中，因?yàn)椴寮w積會(huì)打包進(jìn)主包內(nèi)，很容易造成主包體積超過(guò) 2M 從而無(wú)法發(fā)布，我們暫且叫這個(gè)有插件的分包叫分包P，這時(shí)候另外兩個(gè)業(yè)務(wù)分包XY，想引入這個(gè)分包P里的插件（插件里包含了幾個(gè)組件和一些接口函數(shù)）。

方案一：因?yàn)榉职锉旧砭褪强梢砸氩寮?，所以想直接在分包XY里面分別引入插件，但是同一個(gè)插件是不能在一個(gè)項(xiàng)目里多次引用的，所以這個(gè)方案不行。
方案二：把插件放在主包里，這樣雖然可以實(shí)現(xiàn)，但是插件大小會(huì)打包進(jìn)主包，容易超過(guò) 2M 無(wú)法發(fā)布
方案三：分包異步化，將插件單獨(dú)放在一個(gè)分包P中，分包XY通過(guò)分包異步化來(lái)引入。

分包異步化

官網(wǎng)
簡(jiǎn)單介紹一下，一般我們從主包跳到分包或者分包跳到分包，都是跳頁(yè)面，在跳的時(shí)候才會(huì)去加載分包，但是如果在一個(gè)分包里想要引入另一個(gè)分包的組件或者接口的時(shí)候，這個(gè)時(shí)候就沒(méi)辦法正常使用了，因?yàn)榱硪粋€(gè)分包不知道在什么時(shí)機(jī)去加載。分包異步化則解決了這個(gè)問(wèn)題。

跨分包自定義組件引用

目錄結(jié)構(gòu)，有兩個(gè)分包1和2，分包1中有一個(gè)自定義組件，這時(shí)候分包2想要引入分包1的組件，代碼如下：

"subpackages": [
	{
	  "root": "pagesPlugin1",
	  'pages': [
	    'page-index/index'
	  ],
	  "plugins": {
	    "assist-photo": {
	      "version": "3.2.1",
	      "provider": "wxcf13b931313209a4"
	    }
	  }
	},
	{
	  "root": "pagesPlugin2",
	  'pages': [
	    'page-index/index'
	  ]
	}
]

這是分包2的代碼

<style lang="less">
</style>

<template>
  <div>這是pagesPlugin2</div>
  <chose-part></chose-part>
</template>

<script>
import wepy from '@wepy/core'
wepy.page({
  data: {
  },
  onShow() {
  }
})
</script>
<config>
{
  "usingComponents": {
    "chose-part": "../../pagesPlugin1/components/chose-part/index",
  },
  "componentPlaceholder": {
    "chose-part": "view"
  }
}
</config>

這個(gè)時(shí)候，打開(kāi)分包2的頁(yè)面就可以看到這個(gè)組件了

跨分包 JS 代碼引用

分包2想調(diào)用分包1的接口，這里在分包1先導(dǎo)出一些函數(shù)
pagesPlugin1/utils/index.js

export const sayHello = () => {
  console.log('hello')
}

在分包2調(diào)用
pagesPlugin2/page-index/index

import wepy from '@wepy/core'
wepy.page({
  data: {
  },
  methods: {
    getPagesPlugin1 () {
      require.async('../../pagesPlugin1/utils/index.js').then(pkg => {
        console.log('utils', pkg)
        pkg.sayHello()
      }).catch(({mod, errMsg}) => {
        console.error(`path: ${mod}, ${errMsg}`)
      })
    }
  },
  onShow() {
    this.getPagesPlugin1()
  }
})

注意：如果是使用 wepy 這樣的框架，則需要在分包的頁(yè)面中引入一下這些接口函數(shù)，否則最終打包不會(huì)打包這個(gè)接口函數(shù)，因?yàn)樽R(shí)別不出這些依賴

所有代碼親測(cè)有效哦~
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-787028.html

到了這里，關(guān)于小程序：使用分包異步化解決一個(gè)分包引入另一個(gè)分包的組件/函數(shù)的問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！