微信小程序分包教程示例

一、背景

微信小程序包大小不可以超过2M，但是逐渐迭代的小程序内存难免会越来越大。所以提前做好分包以及包管理是一件很重要的事情。我设定的是只有首页和组件以及其他公共的东西会放在主包，其他的都放到分包。

二、示例

2.1 分包配置

小程序的分包主要是在 app.json subPackages 中声明项目分包结构。大致如下：

{
	"pages": [
		"pages/home/index",
	],
	"subPackages" :[
		{
		"root": "subPackageA/",// 分包根目录
		"name": "A",// 分包别名
		"pages": [
			"pages/subPagea/index"//分包内页面路径
			],
		"entry": "subPackageA/src/index.js", //分包入口文件，分包注入的时候首先执行
		"independent": true // Boolean ,是否为独立分包
		},
		{
		"root": "subPackageB/",
		"name": "B",
		"pages": [
			"pages/subPageb/index",
			]
		}
	],
}

其中：

1. root 为 分包根目录
2. name 为分包别名，分包预加载的时候可以使用
3. entry 为分包入口文件，是相对于分包根目录的路径
   （我没有用到这个属性，试了下一直报“无效的 app.json subPackages["entry”]，我不知道为什么，查了很多没解决，暂时放一下吧。。。）

2.2 文件目录

对应app.json 中的配置文件，相应的文件目录如下所示，这里给两个小建议：

1. 公共组件都放在主包（除了上面在subPackages 配置的文件）
2. 所有的分包除了pages 用来放页面，还应该有自己的static 用来放静态资源，各包之前的静态资源不共用

├── config
│  └── webpack.config.js
├── components //公共组件
│   └── component-A
├── static
│   └── images
├── pages 
│   └── home // 首页
├── subPackageA //分包A
│   ├── pages
│   │   └── subPagea //分包A 下的页面
│   │       ├── index.wxml
│   │       ├── index.wsxx
│   │       ├── index.json
│   │       └── index.js
│   └── static
│       └── images
├── subPackageB
│   ├── pages
│   └── images
├── app.json
├── app.js
├── app.wsxx
└── project.config.json            

三、 遇到的问题

3.1 主包跳转分包，点着没反应。

解决：页面路径前必须放上分包名称，写绝对路径

wx.navigateTo({
url: `/subPackageA/pages/subPagea/index?link=${encodeURIComponent(link)}`
});

3.2 白屏

分包过程中，因为路径变更，会出现白屏，但是页面没有报错的情况。此时重启微信开发者工具就可以。
（查了一上午都没找到解决问题，重启之后就好了。。。浪费了一上午的时间😭）

四、微信小程序分包限制

1. tabBar 页面必须在主包内
2. 主包不可以引用分包的资源，但分包可以使用主包的公共资源
3. 分包与分包之间资源无法相互引用， 分包异步化时不受此条限制
4. 单个分包/主包大小不能超过 2MB
5. 整个小程序所有分包大小不超过 20MB

五、总结

按照文件结构，在app.json 配置 subPackages,分包过程中要注意业务需求是否会有关联。