Taro 将不同组件放置分包插件，支持微信&字节平台，支持样式放入分包

[niubaobaozsy]

插件git地址：taro-dynamic-subpackage

✨ 特性

• ✅ 支持微信小程序和字节小程序
• ✅ 支持将不同模块按需放入不同分包
• ✅ 支持样式放入分包（微信支持，字节小程序不支持组件样式提升所以不支持）
• ✅ 不影响 Taro 正常运行，无副作用
• ✅ 🈚️eval，无任何合规问题
• ✅ 分包后不影响总体积，有效优化包体积

📋 环境要求

• Webpack >= 5.x
• Taro >= 3.x

📦 安装

npm install -D taro-dynamic-subpackage

🚀 使用方式

1. 配置 Babel（重要）

为了支持异步导入（dynamic import），需要在 Babel 配置中关闭 dynamic-import-node 插件。该插件会将动态导入转换为同步导入，导致本插件无法正常工作。

在 babel.config.js 中配置**

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      // framework: 'vue3',
      // ts: true,
      // compiler: 'webpack5',
      "dynamic-import-node": false
    }]
  ]
}

2. 配置插件

在 Taro 配置文件中添加插件配置（通常在 config/index.js）：

// config/index.js
module.exports = {
  // ... 其他配置
  plugins: [
    [
      'taro-dynamic-subpackage',
      {
        // 环境配置，支持 'weapp'（微信小程序）和 'tt'（字节跳动小程序）
        // 默认为 'weapp'
        env: 'weapp',
        
        // 动态模块配置
        dynamicModules: [
          {
            // 分包名称
            packageName: 'dynamic-home',
            // 匹配规则，使用正则表达式匹配模块路径
            test: [/[\\/]components[\\/]home[\\/]/],
          },
          {
            packageName: 'dynamic-b',
            test: [/[\\/]components[\\/]b[\\/]/],
          },
          // ... 更多配置
        ],
        
        // 哪些分包的样式需要放入主包
        // 未配置的分包，样式默认放置在对应分包文件中
        dynamicStyleInApp: ['dynamic-b', 'dynamic-common'],
      },
    ],
  ],
}

3. 组件分包使用

在 Vue 组件中使用 defineAsyncComponent 进行异步导入：

<script>
import { defineAsyncComponent } from 'vue'

const aaa = defineAsyncComponent(
  () => import('@/components/common/vip/aaa.vue')
)
</script>

4. npm 包分包使用

使用动态 import() 导入 npm 包：

let context = null

const getContext = async () => {
  const module = await import('your-npm-package')
  context = module.default || module
}

getContext()

🔧 配置说明

插件配置项

参数	类型	默认值	说明
env	'weapp' | 'tt'	'weapp'	小程序环境，weapp 为微信小程序，tt 为字节跳动小程序
dynamicModules	Array<DynamicModule>	[]	动态模块配置数组
dynamicStyleInApp	string[]	[]	需要将样式放入主包的分包名称数组

DynamicModule 配置项

参数	类型	说明
packageName	string	分包名称，需要与 app.config.js 中配置的分包名称一致
test	RegExp[]	匹配模块路径的正则表达式数组

💡 核心原理

插件通过接管 Webpack 的异步分包加载流程，根据用户配置的匹配规则，将不同的异步模块构建到对应的分包中，实现按需加载和包体积优化。

⚠️ 注意事项

1. 分包配置：确保 packageName 与 app.config.js 中配置的分包名称一致
2. 样式处理：字节小程序不支持组件样式提升，因此不支持样式分包功能
3. 匹配规则：test 配置使用正则表达式，注意路径分隔符的转义（使用 [\\/] 兼容不同操作系统）
4. 异步导入：只有使用动态 import() 或 defineAsyncComponent 导入的模块才会被处理
5. Babel 配置：必须确保 Babel 配置中 dynamic-import-node 设置为 false，否则异步导入会被转换为同步导入，导致插件无法正常工作

📸 效果展示

分包前后对比

📝 示例

完整配置示例

// config/index.js
module.exports = {
  plugins: [
    [
      'taro-dynamic-subpackage',
      {
        env: 'weapp',
        dynamicModules: [
          {
            packageName: 'dynamic-home',
            test: [/[\\/]components[\\/]home[\\/]/],
          },
          {
            packageName: 'dynamic-vip',
            test: [/[\\/]components[\\/]vip[\\/]/],
          },
          {
            packageName: 'dynamic-common',
            test: [/[\\/]components[\\/]common[\\/]/],
          },
        ],
        dynamicStyleInApp: ['dynamic-common'],
      },
    ],
  ],
}