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

背景：博主最近开发的记账小程序，因为引入了ecahrts导致主包体积超出官方规定的2M以内。

微信官方资料：

跨分包自定义组件引用：一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。

// subPackageA/pages/index.json
{
  "usingComponents": {
    "button": "../../commonPackage/components/button",
    "list": "../../subPackageB/components/full-list",
    "simple-list": "../components/simple-list",
    "plugin-comp": "plugin://pluginInSubPackageB/comp"
  },
  "componentPlaceholder": {
    "button": "view",
    "list": "simple-list",
    "plugin-comp": "view"
  }
}

跨分包 JS 代码引用：一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果。

// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
  console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
  pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

分包A和分包B，A需要使用B里面的组件时，只需在pages.json里面A配置下的style里添加上面配置即可。

vue2使用CommonJS模块规范引入js；vite使用ES6的模块规范。

注意：如果js插件使用Common.js模块规范编写的，那就得用require去引入，在vite中需要使用相关api获取到文件打包后的文件指纹名，或者将静态文件放入static，pulic中才可在生成环境正常使用。

vite相关资料：

glob导入
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
const modules= import.meta.glob('./dir/*.js')
以上将会被转译为下面的样子：
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

在引入echarts.js时出现报错，在网上找了一圈都没发现解决办法，最终静下心来仔细查看报错信息，查看部分echarts源码，发现它是CommonJS规范编写的，根据以往静态资源动态加载经验解决。

/** js静态文件动态加载 */ 
const ecahrtPath = './static/echarts.min.js' 
const echarts = require(import.meta.glob('./static/echarts.min.js')[ecahrtPath]()) 
/** js静态文件动态加载 */

微信分包异步化使用小妙招，随着项目业务越来越多，逻辑代码越来越多，体积越来越大；通过把所有核心代码放入到分包中，主包只引用，解决主包体积过大的问题。

// 技巧：分包异步化，配合navigate页面跳转api实现
<script setup lang="ts"> 
import { onShow } from '@dcloudio/uni-app' 

onShow(() => { 
 uni.redirectTo({ 
  url: '/subPackageB/statistics/statistics' 
 }) 
}) 
</script> 
<template> 
<view> </view> 
</template> 
 

坑：以上配置一定要使用连字符，驼峰命名会导致配置无效，页面使用组件时用大驼峰或连字符都可。