业务场景:
有两个业务分包,分别为:分包1: pages_crm
分包2: pages_app
,分包1需要引用分包2的组件
方案一:将包2的组件 放到主包里作为公共组件 供两个包使用;但是代码涉及范围大,不好转移,而且容易造成主包体积大于2M
无法发布
方案二:分包异步化 包1异步引入包二的组件
分包异步化:一般我们从主包跳到分包或者分包跳分包,都是跳转页面,在跳的时候才会去加载分包,但是如果在一个分包里想要引入另一个分包的组件或者接口的时候,这个时候就没办法正常使用了,因为另一个分包不知道在什么时机去加载。分包异步化则解决了这个问题。
分包1pages_crm 的pages_crm/leads/components/tabsAbout tabsAbout.vue
组件 中
目录结构:
引用分包2的组件pages_app/components/tabsAbout/ModuleRelevance.vue
第一步:项目的pages.json配置文件分包一"root": "pages_crm"
中配置:
"subPackages": [
{
"root": "pages_crm",
"pages": [
{
"path": "leads/detail", // 线索详情
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
},
//------------------------新增的代码!!!-----------------------
{
"path": "leads/components/tabsAbout", // 线索详情-相关信息
"style": {
"mp-weixin":{
"componentPlaceholder":{
"module-relevance":"view" //占位组件
}
}
}
}
//------------------------新增的代码!!!------------------------
]
}
占位组件一定要配置 因为是异步加载,不设置占位组件,会报错,找不到组件!
第二步:分包1pages_crm组件中引入、注册、使用分包2的组件