uniapp 组件分包

分包的概念

在UniApp中，分包（SubPackage）是一种优化手段，将应用拆分成多个子包，按需加载。主包包含核心资源和启动页面，子包存放非核心页面或功能模块，减少首屏加载时间。

分包配置方法

1. 修改 manifest.json
确保启用分包功能，在 manifest.json 的 mp-weixin 或其他平台配置中添加以下字段：

"optimization": {
  "subPackages": true
}

2. 配置 pages.json
在 pages.json 中通过 subPackages 字段定义分包结构：

{
  "pages": [...], // 主包页面
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [
        {"path": "page1", "style": {...}},
        {"path": "page2", "style": {...}}
      ]
    },
    {
      "root": "subpackageB",
      "pages": [...]
    }
  ]
}

• root：分包根目录（需与项目目录一致）。
• pages：分包内的页面路径（相对 root 的路径）。

分包加载规则

• 主包：必须包含 pages.json 中未声明在 subPackages 的页面、tabBar 页面及公共依赖。
• 子包：独立编译，访问子包页面时动态加载。

分包预下载

在 pages.json 中通过 preloadRule 配置预下载：

"preloadRule": {
  "pages/index/index": {
    "network": "all",
    "packages": ["subpackageA"]
  }
}

• 当访问 pages/index/index 时，自动预下载 subpackageA。

注意事项

• 路径规范：分包路径不能与主包或其他分包重复。
• 依赖隔离：子包应尽量减少对主包的依赖，避免公共资源重复打包。
• 体积限制（微信小程序）：
  • 主包 ≤ 2MB，所有分包 ≤ 8MB，单个分包 ≤ 2MB。

动态引入组件

若需在分包中使用组件，可通过 require 动态引入：

const component = require('@/subpackageA/components/example.vue');

或使用 easycom 自动引入（需在 pages.json 配置）：

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/subpackageA/components/uni-$1.vue"
  }
}