【uniapp】小程序端实现分包异步化

笨笨狗吞噬者2025-09-26 19:41

背景

微信小程序、支付宝小程序、抖音小程序等支持占位组件，但是 uniapp 只支持在 pages.json 下的页面中配置 componentPlaceholder，并不支持在某个具体的组件中添加此配置，于是我写了 github.com/chouchouji/... 解决此问题。

特性

配置简单，开箱即用
支持 vue、nvue、uvue 三种文件
支持 uni-app 和 uni-app-x 项目
支持组合式和选项式两种写法

使用指南

安装

shell 复制代码

// npm
npm i @binbinji/vite-plugin-component-placeholder -D

// yarn
yarn add @binbinji/vite-plugin-component-placeholder -D

// pnpm
pnpm add @binbinji/vite-plugin-component-placeholder -D

引入插件

javascript 复制代码

// vite.config.*
import componentPlaceholderPlugin from '@binbinji/vite-plugin-component-placeholder'
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni(), componentPlaceholderPlugin()],
})

在 vue/nuve/uvue 文件中添加配置

在 vue 相关文件中添加 componentPlaceholder 配置

组合式文件

vue 复制代码

<template>
  <view>test page</view>
  <test></test>
</template>

<script setup>
import test from './test.vue'

defineOptions({
  componentPlaceholder: {
    test: 'view',
  },
})
</script>

选项式文件

vue 复制代码

<template>
  <view>test page</view>
  <test></test>
</template>

<script>
import test from './test.vue'

export default {
  componentPlaceholder: {
    test: 'view',
  },
}
</script>