一、小程序对代码包的限制
正常情况下，小程序首次启动时，会将整个代码包下载下来，所以如果代码包过大，会影响小程序的首次启动时间。因此小程序官方对于代码包有大小限制。
1.1 小程序的限制
- 正常情况下，小程序对代码包的限制是：大小不超过 2M，超过这个大小无法预览，也无法上传代码
- 做了分包加载的情况下，限制是：每个包大小不超过 2M，所有包总共的大小不超过 16M。
1.2 如何查看代码包大小
点击微信开发者工具的右上角 - 详情，可以看到最下方有代码包大小，包含本地代码包大小、上次预览代码包大小、上次上传代码包大小：
如果配置了分包，点击下拉箭头，还能看到各个分包的大小：
二、如何解决代码包过大问题
2.1 分包加载
分包加载是微信官方提供的一种方案，整个的思路是： 将代码划分成不同的包，打开一个包中的某个页面，才加载这个包的代码，以此来优化小程序首次启动的下载时间。
分包有这么几个注意点：
- 使用 subpackages 进行分包路径声明，subpackages 配置路径外的目录会被打包到主包中
- tabBar 里配置的路径必须放在主包里
- 不同的分包之间的资源不能相互引用，但都可引用主包中的资源
2.2 将静态资源存储在服务器
比如将项目中使用的图片资源存储在图床或专门的静态资源服务器中，减少其对代码包占用的空间。 这种方式不在本篇文章的讨论范围内，暂不赘述。
三、分包加载实操
下面以一个分包为例：
3.1 按一定逻辑划分项目页面
这个步骤，可以按项目的业务逻辑分，也可以按照不同页面的使用频率分。 在这个例子中，直接将除 tabBar 外的页面划分到分包里：
// tabBar(放入主包)
"pages/index/index",
"pages/logs/logs"
// packageA(分包)
"pages/parent/parent",
"pages/child/child"
3.2 在 app.json 中配置路径
配置一个 subpackages 属性，值为一个数组。 数组中的每个对象都是一个分包。 每个分包中，需要配置几个属性：
- root: 这个分包的根路径
- Pages: 这个分包中的页面路径，其中页面路径为分包根路径的相对路径
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"subpackages": [
{
"root": "pages/packageA",
"pages": [
"child/child",
"parent/parent"
]
}
],
}
3.3 保存页面后，生成对应的文件目录
配置完 app.json 文件，保存后，会发现自动生成了对应目录，如下：
需要注意的是：新生成的目录里，文件都是初始化状态，而原来路径的 parent、child 文件依然存在，需要手动迁移代码
3.4 将对应的代码迁移的新生成的文件目录中
在这一步骤，把原本路径的文件代码迁移到新生成的目录里，并删除原来路径的文件
3.5 更改项目中使用的路径
到了这一步，其实分包已经配置完成了，但是还有一个问题需要解决： 更改项目中的引用路径，如： 原来引用的路径是这样的
gotoChild() {
wx.navigateTo({
url: '/pages/child/child',
})
}
需要更改成最新路径：
gotoChild() {
wx.navigateTo({
url: '/pages/packageA/child/child',
})
}
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。
目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里
如文章有错误或表述不清晰，欢迎各位留言反馈~~
