微信小程序分包配置

前言

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

---

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

一、为什么要使用分包？

微信小程序主包限制为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/           # 主包公共组件

---