uniapp微信小程序分包异步化，跨包组件引入

微信小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。

口述表达就是，如果想要在一个分包内使用另一个分包的组件或资源，可以通过分包异步化实现。
通过分包异步化，可以节省包大小，当你的主包或子包的大小接近2M时，新的资源可以通过分包异步化引入，异步化组件不会占用包大小，从而节省包空间。

配置pages.json

{
    "pages": [ // https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationStyle": "custom",
                "navigationBarTextStyle": "white" 
            }
        }
    ],
    "subPackages": [
        {
            "root": "subPackages/agent",
            "pages": [{
                "path": "pages/agent/index",
                "style": {
                    "navigationBarTitleText": "智能体页面",
                    "navigationBarTextStyle": "black",
                    "usingComponents": {
                        "nav-bar": "/subPackages/chat-component/pages/nav-bar/index" // 组件的路径
                    },
                    "componentPlaceholder": {
                        "nav-bar": "view" // 未完成时的占位组件
                    }
                }
            }]
        },
        {
            "root": "subPackages/chat-component",
            "pages": [{
                "path": "pages/chat/index",
                "style": {
                    "navigationBarTitleText": "",
                    "navigationStyle": "custom",
                    "navigationBarTextStyle": "white"
                }
            }]
        }
    ],
}

这里我样式了一个子包中使用分包异步化，加载另一个子包组件的例子，其中subPackages/agent是一个子包，subPackages/chat-component是另一个子包，我在subPackages/agent子包的pages/agent/index页面引入subPackages/chat-component子包内的nav-bar组件

由于我引入的是chat-component子包内的nav-bar/index页面，而我们在pages.json里只定义了chat-component/pages/chat/index.vue页面，所以我们必须在chat/index.vue内引入同包的nav-bar/index.vue页面，否则/nav-bar/index.vue将不会被打包，导致分包异步化导入失败

<template>
    <view>
        <NavBar/>
    </view>
</template>

<script setup>
import NavBar from '@/subPackages/chat-component/pages/nav-bar/index.vue';
</script>

到这里，我们的异步化的配置工作就做好了，可以在agent/index.vue页面正常导入了

导入分包异步化组件

agent/index.vue页面

<template>
    <view>
        <NavBar />
    </view>
</template>

<script setup>
import NavBar from '@/subPackages/chat-component/pages/nav-bar/index.vue';
</script>

就像正常引入组件一样，导入使用即可，需要注意，导入的路径得跟pages.json内配置的组件路径一致。

分包异步化支持的组件通信

经过测试，得到如下总结：
支持的通信方式：

• emit
• props
• defineModel
• provide/inject

不支持的通信方式：

• defineExpose 父组件调用异步化组件内的事件

下面是测试页面，你可以复制到你的页面里直接查看效果
父组件 agent/index.vue

<template>
    <view>
        <view>父级页面</view>
        <button type="primary" size="mini" @click="onFn">父组件调用子组件事件</button>
        <button type="primary" size="mini" @click="onFnUpdate">父组件修改双向绑定内容</button>
        <view>===============================================</view>
        <view>分包异步化组件</view>
        <NavBar ref="navBarRef" :text="text" v-model="text2" @onBack="onBack" />
    </view>
</template>

<script setup>
import NavBar from '@/subPackages/chat-component/pages/nav-bar/index.vue';
import { ref, provide } from 'vue';

const navBarRef = ref();

const form = ref({
    text: '测试provide'
});
provide('form', form);

const text = ref('父组件内容');

const text2 = ref('双向绑定的内容');
const onFnUpdate = () => {
    text2.value = '父组件修改';
};

const onFn = () => {
    navBarRef.value.event1();
};

const onBack = (e) => {
    console.log('子组件返回了', e);
};
</script>

异步化组件 nav-bar/index.vue

<template>
    <view>
        <button type="primary" size="mini" @click="onBack">子组件事件回传</button>
        <view>props绑定内容:{{ props.text }}</view>
        <button type="primary" size="mini" @click="onUpdate">子组件修改双向绑定内容</button>
        <view>
            {{ text2 }}
        </view>
        <view>
            {{ form.text }}
        </view>
    </view>
</template>

<script setup>
import { defineEmits, defineProps, defineExpose, defineModel, inject } from 'vue';

const props = defineProps({
    text: {
        type: String,
        defaule: ''
    }
});
const emit = defineEmits(['onBack']);

const form = inject('form');

const text2 = defineModel();
const onUpdate = () => {
    text2.value = '子组件修改';
};

const onBack = () => {
    emit('onBack', { text: '子组件返回' });
};

const event1 = () => {
    console.log('子组件内事件');
};

defineExpose({ event1 });
</script>

---

参考文档：
微信小程序分包异步化
如何使用分包异步化能力？
uniapp微信小程序之分包异步化