我们在开发小程序之初，肯定先要了解小程序开发的种种限制。相信童鞋一定会为官方的小程序包大小不得超过2M这一限制而头疼不已，好不容易爬坑出来，到了提交发布代码这关键一步，却因为代码体积超限迫使含辛茹苦撸出的小程序胎死腹中...啊，多么痛的领悟~
还好，官方推出了小程序分包加载这一功能：
2018年6月15日周五23点43分，小程序发布官方公告：小程序分包加载功能升级，新增性能监控，意味着小程序的代码包总上限可提升至8M，但是分包的大小还是不超过2M。即可以使用1个主包，3个分包的方式达到8M的总的代码包大小。
这对于广大开发者来说无疑是重大喜讯，废话不多说，动手之前建议认真阅读官方文档，以避免不必要的“趟坑之旅”，现罗列以下几点与诸位共勉：
环境要求
微信 6.6 客户端，1.7.3 及以上基础库开始支持，请更新至最新客户端版本，开发者工具请使用 1.01.1712150 及以上版本，可点此下载
如何分包
在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分。
目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
使用方法
假设支持分包的小程序目录结构如下：
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subPackages 字段声明项目分包结构：
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
打包原则
- 声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中
- app（主包）也可以有自己的 pages（即最外层的 pages 字段）
- subPackage 的根目录不能是另外一个 subPackage 内的子目录
- 首页的 TAB 页面必须在 app（主包）内
引用原则
- packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
- packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
- packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
低版本兼容
由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。 新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。
有坑请绕行
网上找资源的时候发现一篇博客写转转小程序实战分包加载的，其中有提到历史入口兼容的问题：
一个页面放入分包之后，路径会发生变化，例如详情页由/pages/detail变为/subPages/trade/detail，意味着如果用户访问了以前的page则得不到正确的页面响应（例如：分享出去的小程序卡片、二维码、公众号推送消息等），这些静态不可改变的历史入口怎么办？我们目前采用如下方案：
原来主包内的每个页面都保留，但代码只保留跳转逻辑，用户进来后立即跳到对应的分包页面，用户几乎是无感知的。这样也会产生一点小问题：这些跳转页面也占用一定的空间，接下来我们会优化成在onLaunch、页面跳转时进行判断，直接跳入正确的分包页面。
使用过程
完整示例代码请浏览： wechat-package
一个主包放不下的图片（超过2M），可以放在分包下，实现代码总限超过2M，但分包大小不超过2M。
我的app.json的内容如下：
{
"pages": [
"pages/index/index",
"pages/loading/loading",
"pages/logs/logs",
"pages/plugin/plugin"
],
"subPackages": [
{
"root": "package1",
"pages": [
"pages/home/home"
]
},
{
"root": "package2",
"pages": [
"pages/home/home"
]
},
{
"root": "package3",
"pages": [
"pages/home/home"
]
},
{
"root": "packageIndependent",
"pages": [
"pages/home/home"
],
"independent": true
}
],
"preloadRule": {
"packageIndependent/pages/home/home": {
"network": "all",
"packages": ["packageIndependent"]
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "学习分包加载",
"navigationBarTextStyle": "black"
},
"plugins": {
"tencentvideo": {
"version": "1.2.5",
"provider": "wxa75efa648b60994b"
},
"txmap": {
"version": "1.0.6",
"provider": "wx5bc2ac602a747594"
}
}
}
分包加载流程
一般情况下，小程序的代码将打包在一起，在小程序启动时一次性下载完成。采用分包时，小程序的代码包可以被划分为几个：一个是“主包”，包含小程序启动时会马上打开的页面代码和相关资源；其余是“分包”，包含其余的代码和资源。这样，小程序启动时，只需要先将主包下载完成，就可以立刻启动小程序。这样就可以显著降低小程序代码包的下载时间。
更多可参考小程序开发指南
如上图所示，我这里的几个分包package1、package2、package3，每个分包下都可以有自己的页面代码和资源文件，而除掉分包目录部分就是小程序的主包。在小程序启动时分包的目录不会马上被下载下来，只有主包的内容才会被下载。利用这个特性就可以显著降低初始启动时的下载时间。
在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。
目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
使用如下：
"subPackages": [
{
"root": "package1",
"pages": [
"pages/home/home"
]
},
{
"root": "package2",
"pages": [
"pages/home/home"
]
},
{
"root": "package3",
"pages": [
"pages/home/home"
]
},
{
"root": "packageIndependent",
"pages": [
"pages/home/home"
],
"independent": true
}
],
打包原则
声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中。
app（主包）也可以有自己的 pages（即最外层的 pages 字段）。
subPackage 的根目录不能是另外一个 subPackage 内的子目录。
首页的 TAB 页面必须在 app（主包）内。
引用原则
packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件。
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template。
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源。
注意：
- 不管分包如何处理，跳转路径和之前一样正常跳转，一点都没变；加载分包时会有弹窗提示。
- 如果分包的首页在TAB中，则文件必须不能放在分包的目录下；
- 尽管做了分包处理，项目的素材，公共文件等若放在最外层依然会被分在主包中。可将图片等放在分包的目录下。
参考文档：小程序官方开发文档-分包加载
