微信小程序分包配置

前言

随着微信小程序功能的不断丰富，代码体积逐渐增大，分包加载成为优化小程序性能的重要手段。本文将系统讲解微信小程序分包配置的全流程，分为入门篇和实战篇，帮助开发者掌握分包技术，提升小程序加载速度和用户体验。

---

入门篇：分包基础概念与配置

一、为什么要使用分包？

微信小程序主包限制为2MB，总包限制提升至20MB（2023年最新数据）。分包可以：

• 突破主包体积限制
• 实现按需加载，加快首屏速度
• 优化代码组织结构
• 便于团队协作开发

二、分包基本概念

1. 主包：包含小程序启动页面、TabBar页面及公共资源
2. 分包：根据功能划分的独立模块，可按需加载
3. 分包预加载：提前下载分包，减少用户等待时间

三、基础分包配置

在app.json中进行配置：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "pages/apple/apple",
        "pages/banana/banana"
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["packageA"]
    }
  }
}

配置项说明：

• root：分包根目录
• pages：分包页面路径（相对于分包根目录）
• preloadRule：预加载规则配置

四、目录结构规范

推荐的项目目录结构：

├── app.js
├── app.json
├── app.wxss
├── pages/                # 主包页面
│   ├── index/
│   └── logs/
├── packageA/             # 分包A
│   ├── pages/
│   │   ├── cat/
│   │   └── dog/
│   └── components/
├── packageB/             # 分包B
│   ├── pages/
│   │   ├── apple/
│   │   └── banana/
│   └── utils/
└── components/           # 主包公共组件

---