分包异步化

在小程序中，不同的分包对应不同的下载单元；因此，分包之间不能互相使用自定义组件或进行 require。

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

uni-app 和 uni-app x 项目均支持 分包异步化 的相关写法和配置，使用之前需要确认目标小程序原生是否支持分包异步化。

跨分包自定义组件引用

此特性依赖配置 componentPlaceholder，目前仅支持在 pages.json 中添加页面级别的配置。

如果需要在某个组件中配置，详见 ask社区帖子

跨分包JS代码引用

以下方案仅适用于 vue3 项目

微信、支付宝等小程序端默认支持跨分包 JS 代码引用，需要写小程序原生支持的语法，不能使用静态引入或者动态引入。示例如下：

sub分包 定义 utils.js 文件

// sub/utils.ts
export function add(a: number, b: number): number {
    return a + b
}

示例源码如下，请查看 pre > code 标签中的内容

// sub/utils.ts
export function add(a: number, b: number): number {
    return a + b
}

sub分包 正常使用 utils.js 文件

// sub/index.(u)vue
<template>
    <view>
        {{ count }}
        <button @tap="handleClick">add one</button>
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { add } from "./utils.js";

    const count = ref(1);
    function handleClick() {
        count.value = add(count.value, 1);
    }
</script>

示例源码如下，请查看 pre > code 标签中的内容

// sub/index.(u)vue
<template>
    <view>
        {{ count }}
        <button @tap="handleClick">add one</button>
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { add } from "./utils.js";

    const count = ref(1);
    function handleClick() {
        count.value = add(count.value, 1);
    }
</script>

其他分包使用 sub分包 的 utils.js 文件

// sub2/index.(u)vue
<template>
    <view>
       {{ count }}
        <button @tap="handleClick">add two</button>
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue";

    const count = ref(1);
    function handleClick() {
        require('../sub/utils.js', sub_utils => {
            count.value = sub_utils.add(count.value, 2);
        }, ({
            mod,
            errMsg
        }) => {
            console.error(`path: ${mod}, ${errMsg}`)
        })
    }
</script>

示例源码如下，请查看 pre > code 标签中的内容

// sub2/index.(u)vue
<template>
    <view>
       {{ count }}
        <button @tap="handleClick">add two</button>
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue";

    const count = ref(1);
    function handleClick() {
        require('../sub/utils.js', sub_utils => {
            count.value = sub_utils.add(count.value, 2);
        }, ({
            mod,
            errMsg
        }) => {
            console.error(`path: ${mod}, ${errMsg}`)
        })
    }
</script>

注意：

• 引用的文件必须存在
• 使用小程序支持的原生语法