小程序分包

小程序分包是一种优化技术，主要用于解决小程序代码包体积限制和提升首次加载速度的问题。以下是具体实现流程和关键点：

一、分包原理

1. 主包：包含小程序启动页面（app.json中定义的页面）和公共资源
2. 分包：包含非启动页面和私有资源，按需加载
3. 限制：
   • 主包 ≤ 2MB
   • 单个分包 ≤ 2MB
   • 总包 ≤ 20MB（微信小程序）

二、实现流程

1. 项目结构调整

├── app.js               # 主包入口
├── app.json             # 主包配置
├── app.wxss             # 全局样式
├── subpackages          # 分包目录（名称自定义）
│   ├── packageA         # 分包A
│   │   ├── pages        # 分包页面
│   │   └── resources    # 分包私有资源
│   └── packageB         # 分包B

2. 配置 app.json

{
  "pages": [
    "pages/index/index",      // 主包页面
    "pages/logs/logs"
  ],
  "subpackages": [
    {
      "root": "subpackages/packageA",  // 分包根目录
      "pages": [                      // 分包页面路径（相对root）
        "page1/page1",
        "page2/page2"
      ],
      "independent": false          // 是否独立分包（可选）
    },
    {
      "root": "subpackages/packageB",
      "pages": ["page3/page3"]
    }
  ]
}

3. 打包原则

• 主包自动包含：
  • app.js、app.json、app.wxss
  • 主包pages定义的页面
  • 未被分包引用的公共资源
• 分包独立打包：
  • 仅包含自身root目录下的代码和资源
  • 分包之间默认无法互相引用

4. 上传与加载

• 开发工具：上传时自动分离主包和分包
• 运行机制：
  • 首次启动下载主包 + 分包预下载配置
  • 访问分包页面时按需下载

三、关键 API 和配置

1. 分包预加载

// app.json
"preloadRule": {
  "pages/index/index": {
    "network": "all",
    "packages": ["subpackages/packageA"]
  }
}

2. 独立分包（Independent分包）

• 特点：不依赖主包即可独立运行
• 场景：用于广告页、活动页等独立场景
• 配置：

  {
    "root": "subpackages/independent",
    "pages": ["independentPage"],
    "independent": true
  }
  

四、注意事项

1. 资源引用：
   • 分包内图片/样式建议使用相对路径
   • 主包资源可通过/绝对路径引用
2. 跳转限制：

   // 跳转到分包页面
   wx.navigateTo({
     url: '/subpackages/packageA/page1/page1'
   })
   

3. 公共代码处理：
   • 公共组件/JS库建议放在主包
   • 使用require或import时注意路径问题
4. 体积监控：
   • 使用开发者工具的「代码依赖分析」功能

五、优化建议

• 将低频页面放入分包
• 使用分包预加载提升用户体验
• 对图片资源进行压缩
• 定期清理无用代码

通过分包技术，可以有效控制主包体积，提升小程序的启动速度和用户体验。实际开发中需结合业务需求合理规划分包策略。