# 多端分包与体积优化方案

## 一、问题分析

### 1.1 当前项目结构问题

当前 `pages.json` 包含了所有端的页面配置：

```
pages/
├── user/              # 公共用户页面
├── main/              # 公共主页面
├── mall/
│   ├── consumer/      # 消费者端 (约 40+ 页面)
│   ├── merchant/      # 商家端 (约 20+ 页面)
│   ├── admin/         # 管理端 (约 50+ 页面)
│   ├── analytics/     # 分析端 (约 15+ 页面)
│   ├── delivery/      # 配送端 (约 15+ 页面)
│   └── service/       # 服务端 (约 5+ 页面)
```

### 1.2 小程序包体积限制

| 平台 | 主包限制 | 分包限制 | 总限制 |
|------|---------|---------|--------|
| 微信小程序 | 2MB | 2MB/个 | 20MB |
| 支付宝小程序 | 2MB | 2MB/个 | 20MB |
| 百度小程序 | 2MB | 2MB/个 | 20MB |

**问题**: 如果所有端的页面都打包进小程序，会严重超出限制！

---

## 二、解决方案

### 方案 A：条件编译 + 独立 pages.json（推荐）

**核心思路**: 使用 uni-app x 的条件编译功能，为不同端编译不同的页面配置。

#### 2.1 创建端专用 pages.json

```
pages/
├── pages-consumer.json    # 消费者端页面配置
├── pages-merchant.json    # 商家端页面配置
├── pages-admin.json       # 管理端页面配置
├── pages-analytics.json   # 分析端页面配置
└── pages-delivery.json    # 配送端页面配置
```

#### 2.2 pages-consumer.json 示例

```json
{
  "pages": [
    {
      "path": "pages/user/login",
      "style": { "navigationBarTitleText": "登录" }
    },
    {
      "path": "pages/main/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/main/category",
      "style": { "navigationBarTitleText": "分类" }
    },
    {
      "path": "pages/main/cart",
      "style": { "navigationBarTitleText": "购物车" }
    },
    {
      "path": "pages/main/profile",
      "style": { "navigationBarTitleText": "我的" }
    }
  ],
  "subPackages": [
    {
      "root": "pages/mall/consumer",
      "pages": [
        { "path": "product-detail", "style": { "navigationBarTitleText": "商品详情" } },
        { "path": "checkout", "style": { "navigationBarTitleText": "结算" } },
        { "path": "orders", "style": { "navigationBarTitleText": "订单" } },
        { "path": "payment", "style": { "navigationBarTitleText": "支付" } }
      ]
    }
  ]
}
```

#### 2.3 编译脚本配置

在 `package.json` 中添加编译脚本：

```json
{
  "scripts": {
    "dev:mp-weixin:consumer": "uni -p mp-weixin --pages pages-consumer.json",
    "build:mp-weixin:consumer": "uni build -p mp-weixin --pages pages-consumer.json",
    "dev:mp-weixin:merchant": "uni -p mp-weixin --pages pages-merchant.json",
    "build:mp-weixin:merchant": "uni build -p mp-weixin --pages pages-merchant.json"
  }
}
```

---

### 方案 B：条件编译页面级别（备选）

**核心思路**: 在单个 `pages.json` 中使用条件编译注释。

```json
{
  "pages": [
    // 公共页面
    { "path": "pages/user/login", "style": {} },
    
    // #ifdef PLATFORM_CONSUMER
    // 消费者端页面
    { "path": "pages/main/index", "style": {} },
    { "path": "pages/main/cart", "style": {} },
    // #endif
    
    // #ifdef PLATFORM_MERCHANT
    // 商家端页面
    { "path": "pages/mall/merchant/index", "style": {} },
    // #endif
  ]
}
```

**注意**: 此方案需要自定义平台标识，uni-app x 默认不支持。

---

### 方案 C：多项目共享核心（备选）

**核心思路**: 创建多个小程序项目，共享核心代码。

```
mall/
├── core/                    # 共享核心代码
│   ├── components/
│   ├── utils/
│   ├── api/
│   └── types/
├── projects/
│   ├── consumer/            # 消费者端项目
│   │   ├── pages/
│   │   ├── pages.json
│   │   └── manifest.json
│   ├── merchant/            # 商家端项目
│   │   ├── pages/
│   │   ├── pages.json
│   │   └── manifest.json
│   └── admin/               # 管理端项目
│       ├── pages/
│       ├── pages.json
│       └── manifest.json
└── shared/                  # 共享资源
    ├── static/
    └── uni_modules/
```

---

## 三、推荐方案实施

### 3.1 采用方案 A 的实施步骤

#### 步骤 1：创建消费者端专用配置

创建 `pages-consumer.json`，仅包含消费者端需要的页面。

#### 步骤 2：修改 manifest.json

```json
{
  "mp-weixin": {
    "appid": "消费者端小程序AppID",
    "optimization": {
      "subPackages": true
    }
  }
}
```

#### 步骤 3：配置分包

```json
{
  "subPackages": [
    {
      "root": "pages/mall/consumer",
      "pages": [
        // 消费者端次级页面
      ]
    }
  ],
  "preloadRule": {
    "pages/main/index": {
      "network": "all",
      "packages": ["pages/mall/consumer"]
    }
  }
}
```

#### 步骤 4：排除其他端代码

在 `manifest.json` 中配置排除：

```json
{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    },
    "exclude": [
      "pages/mall/merchant/**",
      "pages/mall/admin/**",
      "pages/mall/analytics/**",
      "pages/mall/delivery/**",
      "pages/mall/service/**"
    ]
  }
}
```

---

## 四、体积优化建议

### 4.1 图片资源优化

```
static/
├── images/
│   ├── consumer/     # 消费者端图片
│   ├── merchant/     # 商家端图片
│   └── common/       # 公共图片
```

- 使用 CDN 托管图片
- 小图片使用 base64 内联
- 使用 WebP 格式

### 4.2 组件按需加载

```uts
// 动态导入组件
const ProductDetail = () => import('@/pages/mall/consumer/product-detail.uvue')
```

### 4.3 代码分割

```
utils/
├── consumer/         # 消费者端专用工具
├── merchant/         # 商家端专用工具
├── admin/            # 管理端专用工具
└── common/           # 公共工具
```

---

## 五、各端小程序独立发布

### 5.1 发布矩阵

| 端 | 小程序名称 | AppID | 用途 |
|---|-----------|-------|------|
| 消费者端 | XX商城 | wx_xxx | 消费者购物 |
| 商家端 | XX商家 | wx_xxx | 商家管理 |
| 配送端 | XX配送 | wx_xxx | 配送员接单 |

### 5.2 独立配置

每个端使用独立的：
- `manifest.json` 配置（AppID、权限等）
- `pages.json` 页面配置
- 图标和启动页

---

## 六、总结

### 推荐方案
**方案 A：条件编译 + 独立 pages.json**

### 核心优势
1. **体积可控**: 每个端只编译自己需要的页面
2. **维护简单**: 代码仍在同一仓库，便于共享和同步
3. **发布灵活**: 各端可独立发布和更新

### 实施优先级
1. 创建 `pages-consumer.json`（消费者端）
2. 配置分包和排除规则
3. 测试编译体积
4. 逐步为其他端创建配置

### 预期效果
- 消费者端小程序主包 < 1.5MB
- 分包 < 500KB
- 总体积 < 3MB
