‌“合理使用分包可以让小程序体积膨胀率降低300%！”‌ —— 来自某头部小程序开发团队

1️⃣ 分包机制原理

1.1 核心限制条件

// 官方限制规则
{
  "主包": "≤2MB",
  "单个分包": "≤2MB",
  "总分包": "≤8MB（可申请调整）",
  "总资源": "≤16MB"
}

1.2 加载流程对比

graph TD
    A[启动小程序] --> B{是否独立分包?}
    B -->|是| C[并行加载主包+分包]
    B -->|否| D[先加载主包]
    D --> E[按需加载分包]

2️⃣ 基础配置实战

2.1 目录结构设计

├── app.js
├── app.json
├── app.wxss
├── packages/       # 分包目录
│   ├── pkgA/       # 分包A
│   │   ├── pages/
│   │   └── static/
│   └── pkgB/       # 分包B
└── subpackages/    # 独立分包

2.2 配置文件示例

// app.json
{
  "pages": ["pages/index/index"],
  "subpackages": [
    {
      "root": "packages/pkgA",
      "name": "shop",
      "pages": ["goods/list", "goods/detail"],
      "independent": false
    },
    {
      "root": "subpackages/user",
      "pages": ["profile", "settings"],
      "independent": true
    }
  ]
}

3️⃣ 高级加载策略

3.1 预加载配置

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

3.2 分包跳转技巧

// 常规跳转
wx.navigateTo({
  url: '/packages/pkgA/pages/goods/list'
})

// 使用别名跳转（需配置全局路径映射）
const routes = {
  shopList: '/packages/pkgA/pages/goods/list'
}

wx.navigateTo({
  url: routes.shopList
})

4️⃣ 性能优化技巧

4.1 资源优化方案

4.2 按需注入实践

// app.json
{
  "lazyCodeLoading": "requiredComponents",
  "componentPlaceholder": {
    "van-button": "view"
  }
}

5️⃣ 常见问题排查

5.1 典型问题清单

1. **白屏问题**：检查分包路径是否正确
2. **资源加载失败**：确认资源路径使用绝对路径
3. **体积超标**：使用`wx.getSubpackageInfo()`监控体积
4. **API不可用**：独立分包无法直接调用app.js方法

5.2 调试命令示例

# 查看分包体积
npm run build --report

# 强制更新分包配置
wxcli --subpackage-update

6️⃣ 最佳实践总结

工程化建议

graph LR
    A[开发阶段] --> B(主包只放启动页)
    A --> C(按业务模块拆分)
    A --> D(公共资源上提)
    E[构建阶段] --> F(自动压缩图片)
    E --> G(资源CDN化)
    E --> H(生成分析报告)

决策矩阵

‌扩展阅读‌：

• 微信官方分包文档
• 小程序性能评分工具
• 分包体积分析插件

欢迎在评论区留下你的分包实战经验！ 🚀