分包规划方案

字数

2980 字

阅读时间

13 分钟

基于真实工程结构与业务需求制定的小程序分包策略，确保性能优化与开发效率的平衡。

1. 现状总览

实际 app.json 配置

json

{
  "pages": [
    "pages/today/index",
    "pages/tasks/index",
    "pages/treehole/index",
    "pages/journal/index",
    "pages/mine/index"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/today/index",
        "text": "今天"
      },
      {
        "pagePath": "pages/tasks/index",
        "text": "任务"
      },
      {
        "pagePath": "pages/treehole/index",
        "text": "树洞"
      },
      {
        "pagePath": "pages/journal/index",
        "text": "随笔"
      },
      {
        "pagePath": "pages/mine/index",
        "text": "我的"
      }
    ]
  },
  "subpackages": [
    {
      "root": "packages/community",
      "name": "community",
      "pages": [
        "post-detail/index",
        "post-editor/index",
        "topic/index",
        "action-feedback/index"
      ]
    },
    {
      "root": "packages/profile",
      "name": "profile",
      "pages": [
        "report-detail/index",
        "badge-detail/index",
        "privacy-detail/index",
        "resource-map/index",
        "profile-edit/index",
        "school-cooperation/index"
      ]
    },
    {
      "root": "independent/sos",
      "name": "sos",
      "independent": true,
      "pages": [
        "index/index",
        "resource-switch/index"
      ]
    }
  ],
  "preloadRule": {
    "pages/today/index": {
      "packages": [
        "packages/community",
        "independent/sos"
      ],
      "network": "all"
    },
    "pages/tasks/index": {
      "packages": [
        "packages/profile"
      ],
      "network": "all"
    },
    "pages/treehole/index": {
      "packages": [
        "packages/community"
      ],
      "network": "wifi"
    },
    "pages/mine/index": {
      "packages": [
        "packages/profile"
      ],
      "network": "all"
    }
  }
}

关键发现

Tab命名与文档不一致：app.json中为"随笔"，文档中常称"心情随笔"
缺少journal分包：实际配置中不存在packages/journal分包
预加载策略差异：今天页预加载community和sos，而非原计划的journal
school-cooperation页面位置不当：学校协同页面位于主包，应迁移到profile分包

2. 分包原则

核心原则

Tab页面主包化：所有Tab页面必须位于主包，保证启动即用
域拆分策略：按业务域进行分包，便于团队独立开发维护
合规/高风险独立：SOS等高风险功能使用独立分包，确保紧急情况可用

拆分依据

访问频率：高频功能主包，低频功能分包
功能相关性：相关功能聚合在同一分包
资源依赖：重型组件（富文本、地图、图表）分包化
合规要求：敏感功能独立部署，便于监管

3. 主包页面清单

必须保留在主包的理由

页面路径	功能描述	保留理由
`pages/today/index`	今天Tab - 情绪打卡、微建议、工具箱	核心入口，用户启动必用
`pages/tasks/index`	任务Tab - 任务看板、统计概览	核心管理功能，高频访问
`pages/treehole/index`	树洞Tab - 社区信息流、互动入口	核心社交功能，高频访问
`pages/journal/index`	随笔Tab - 心情记录、情绪趋势	核心记录功能，高频访问
`pages/mine/index`	我的Tab - 个人中心、概览信息	核心个人信息，高频访问

包体控制策略

组件复用：公共组件抽离到components目录
静态资源CDN：图片、图标等使用CDN加速
按需加载：第三方SDK动态引入
代码压缩：开启代码压缩和摇树优化
目标体积：主包控制在2MB以内

4. 各分包详解

packages/community（社区域）

页面清单：

post-detail/index - 帖子详情页
post-editor/index - 发帖编辑器
topic/index - 话题聚合页
action-feedback/index - 行动卡反馈页

进入来源：

树洞Tab点击帖子标题 → post-detail
树洞Tab点击发帖按钮 → post-editor
帖子详情页点击话题标签 → topic
领取行动卡成功 → action-feedback

常用跳转：

post-detail ↔ post-editor（编辑已发帖子）
post-detail → topic（查看相关话题）
action-feedback → post-detail（返回原帖）

依赖云函数：

treeholeModeration - 内容审核与风险识别
analyticsIngest - 社区行为数据分析

审核钩子：

发帖前草稿自检 → 调用treeholeModeration
评论内容实时审核 → 集成Dify内容审核工作流
高风险内容人工审核 → 触发审核通知机制

packages/profile（个人中心域）

页面清单：

report-detail/index - 护心周报详情
badge-detail/index - 徽章详情页
privacy-detail/index - 隐私授权中心
resource-map/index - 资源地图导航
profile-edit/index - 个人资料编辑
school-cooperation/index - 学校协同页面

进入来源：

我的Tab点击周报卡 → report-detail
我的Tab点击徽章 → badge-detail
我的Tab点击隐私设置 → privacy-detail
我的Tab点击资源地图 → resource-map
我的Tab点击编辑资料 → profile-edit
我的Tab点击学校协同 → school-cooperation

依赖资源：

周报图表组件（ECharts小程序版）
地图SDK（腾讯地图小程序插件）
徽章动画资源（Lottie动画库）
学校协同API接口（校内系统集成）

independent/sos（独立SOS域）

页面清单：

index/index - SOS主面板
resource-switch/index - 紧急资源切换

独立原因：

紧急响应要求：任何情况下都能秒开，不依赖主包加载状态
合规要求：高风险功能独立部署，便于监管和审计
容错机制：主包异常时仍能正常工作
性能考虑：极简设计，确保冷启动性能

回滚策略：

独立版本控制，可单独回滚SOS功能
主包异常时自动降级到SOS独立模式
紧急情况下可远程切换SOS资源配置

5. 预加载策略

基于《埋点与数据分析.md》的策略

json

"preloadRule": {
  "pages/today/index": {
    "packages": ["packages/community", "independent/sos"],
    "network": "all"
  },
  "pages/tasks/index": {
    "packages": ["packages/profile"],
    "network": "all"
  },
  "pages/treehole/index": {
    "packages": ["packages/community"],
    "network": "wifi"
  },
  "pages/mine/index": {
    "packages": ["packages/profile"],
    "network": "all"
  }
}

策略说明

页面	预加载分包	网络策略	触发条件
今天页	community, sos	all	页面加载时预加载
任务页	profile	all	页面加载时预加载
树洞页	community	wifi	仅WiFi环境下预加载
我的页	profile	all	页面加载时预加载

优化依据

今天页预加载SOS：基于埋点数据，SOS功能在紧急情况下使用频率高，需保证随时可用
树洞页WiFi预加载：社区功能资源消耗大，基于用户网络环境智能预加载
全网络预加载profile：个人中心功能访问频率高，且数据量相对较小

6. 包体预算与优化

体积预算分配

分包类型	目标体积	当前预估	优化措施
主包	< 2MB	~1.8MB	组件抽离、资源CDN
community	< 1MB	~800KB	富文本模板化、表情CDN
profile	< 1MB	~900KB	图表按需加载、地图插件化
sos	< 200KB	~150KB	极简设计、云能力调用

具体优化措施

TDesign按需引入

javascript

// 按需引入组件，减少包体
import { Button, Card, List } from 'tdesign-miniprogram/button'

图片/CDN优化

所有静态图片迁移至CDN
使用WebP格式替代PNG/JPG
图片压缩和质量控制
动态图片懒加载

代码分片

异步组件加载
路由级代码分割
第三方库按需引入
公共代码提取

未用资源清理

定期清理未使用的组件和资源
移除废弃的页面和功能
优化依赖包大小
清理冗余代码

7. 风险与回滚

审核失败风险

风险场景：

SOS功能审核不通过
社区功能被判定为敏感
个人信息处理合规问题

降级方案：

SOS功能降级：移除独立分包，合并到主包简化版本
社区功能降级：关闭发帖功能，仅保留浏览
个人信息降级：移除敏感信息收集功能

包体超限风险

风险场景：

主包超过2MB限制
单个分包超过1MB
预加载导致启动缓慢

拆分方案：

新增toolkit分包：将工具类功能拆分到独立分包
资源外置：将大型资源文件迁移到云存储
功能延迟加载：非核心功能改为动态加载

操作步骤

主包超限处理

bash

# 1. 分析包体构成
npm run analyze

# 2. 大文件定位
find miniprogram -name "*.js" -exec ls -lh {} \; | sort -k5 -hr | head -10

# 3. 组件抽离
# 将大型组件迁移到分包或CDN

# 4. 重新打包
npm run build:prod

分包回滚流程

保留上一版本分包配置
准备回滚脚本和配置
监控上线后性能指标
异常情况下30分钟内完成回滚

8. 一致性自检清单

文档路径对齐检查

[ ] docs/页面文档/页面-今天.md ↔ pages/today/index
[ ] docs/页面文档/页面-任务.md ↔ pages/tasks/index
[ ] docs/页面文档/页面-树洞.md ↔ pages/treehole/index
[ ] docs/页面文档/页面-心情随笔.md ↔ pages/journal/index
[ ] docs/页面文档/页面-我的.md ↔ pages/mine/index

命名统一检查

[ ] Tab命名统一："随笔" vs "心情随笔" → 统一为"随笔"
[ ] 路由命名规范：全部使用kebab-case命名
[ ] 组件命名规范：使用PascalCase命名
[ ] 文件命名规范：使用kebab-case命名

预加载目标存在性检查

[ ] packages/community 分包存在且可正常加载
[ ] packages/profile 分包存在且可正常加载
[ ] independent/sos 独立分包存在且可正常加载
[ ] 预加载规则中的所有路径在app.json中存在
[ ] 分包页面路径与实际文件路径一致

功能依赖检查

[ ] 云函数名称与分包功能对应关系正确
[ ] API接口路径与分包页面功能匹配
[ ] 组件依赖关系正确，无循环依赖
[ ] 资源引用路径正确，CDN链接可访问

9. 发现的问题与修复建议

问题清单

Tab命名不一致

diff

- 文档中：心情随笔
+ 实际中：随笔
+ 建议：统一使用"随笔"

缺少journal分包

diff

- 当前状态：无packages/journal分包
+ 建议添加：考虑到日记详情、编辑等功能需求
+ 配置建议：
{
  "root": "packages/journal",
  "name": "journal",
  "pages": [
    "diary-detail/index",
    "diary-edit/index",
    "report-export/index"
  ]
}

另：新增 tasks 分包用于任务域页面统一归档：
{
  "root": "packages/tasks",
  "name": "tasks",
  "pages": [
    "task-detail/index"
  ]
}

预加载策略优化

diff

- 当前：今天页预加载community和sos
+ 建议：考虑添加journal分包预加载
+ 修改建议：
"pages/today/index": {
  "packages": [
    "packages/community",
    "packages/journal",
    "independent/sos"
  ],
  "network": "all"
}

school-cooperation页面归属 ✅ 已修复

diff

- 之前：位于主包pages/mine/school-cooperation
+ 已修复：迁移到profile分包
+ 路径建议：packages/profile/school-cooperation/index

缺少错误边界处理

diff

+ 建议：添加分包加载失败的处理机制
+ 实现方案：
1. 分包加载时显示loading状态
2. 加载失败提供重试机制
3. 提供降级页面或功能

优先级修复建议

高优先级：

统一Tab命名规范
添加journal分包支持
完善错误处理机制

中优先级：

优化预加载策略
实施school-cooperation页面迁移
添加包体监控机制

低优先级：

完善文档注释
优化构建流程
添加自动化检查

版本历史

版本	日期	修改内容	修改人
v1.0	2024-XX-XX	基于真实工程结构重构分包方案	Claude
v0.9	2024-XX-XX	原始分包规划方案	原作者

贡献者

Cai Hongyu

文件历史

最后编辑于 5 个月前查看完整历史

分包规划方案 ​

1. 现状总览 ​

实际 app.json 配置 ​

关键发现 ​

2. 分包原则 ​

核心原则 ​

拆分依据 ​

3. 主包页面清单 ​

必须保留在主包的理由 ​

包体控制策略 ​

4. 各分包详解 ​

packages/community（社区域） ​

packages/profile（个人中心域） ​

independent/sos（独立SOS域） ​

5. 预加载策略 ​

基于《埋点与数据分析.md》的策略 ​

策略说明 ​

优化依据 ​

6. 包体预算与优化 ​

体积预算分配 ​

具体优化措施 ​

TDesign按需引入 ​

图片/CDN优化 ​

代码分片 ​

未用资源清理 ​

7. 风险与回滚 ​

审核失败风险 ​

包体超限风险 ​

操作步骤 ​

主包超限处理 ​

分包回滚流程 ​

8. 一致性自检清单 ​

文档路径对齐检查 ​

命名统一检查 ​

预加载目标存在性检查 ​

功能依赖检查 ​

9. 发现的问题与修复建议 ​

问题清单 ​

优先级修复建议 ​

版本历史 ​

贡献者 ​

文件历史 ​

分包规划方案

1. 现状总览

实际 app.json 配置

关键发现

2. 分包原则

核心原则

拆分依据

3. 主包页面清单

必须保留在主包的理由

包体控制策略

4. 各分包详解

packages/community（社区域）

packages/profile（个人中心域）

independent/sos（独立SOS域）

5. 预加载策略

基于《埋点与数据分析.md》的策略

策略说明

优化依据

6. 包体预算与优化

体积预算分配

具体优化措施

TDesign按需引入

图片/CDN优化

代码分片

未用资源清理

7. 风险与回滚

审核失败风险

包体超限风险

操作步骤

主包超限处理

分包回滚流程

8. 一致性自检清单

文档路径对齐检查

命名统一检查

预加载目标存在性检查

功能依赖检查

9. 发现的问题与修复建议

问题清单

优先级修复建议

版本历史

贡献者

文件历史