在分包的时候，首先大家得明白什么叫分包，分包的意义是什么？在我的工作中，我接触到了三种分包，当然在不同的场景下，分包的概念有所不同。
一：数据包分包
数据包分包是我在做一个小程序蓝牙开锁的需求的时候遇到的，前端和硬件工程师直接通信，一个协议往往不是一两个字符，100-200个字符是很正常的，你直接传数据包是会失败的。因为数据传输大于20字节就会丢包，所有需要分包。
具体的分包细节，大家可以移步到我这篇文章，这里面有详细介绍。
小程序蓝牙开锁，前端是如何直接和硬件进行数据交互的？
二：webpack大法之code splitting。
code splitting是我在做前端性能优化的时候用到的，code splitting 叫做代码分割，很多人也把它叫做分包。当我们的项目比较大的时候，打包后的app.js的体积比较大，首屏加载时间过长，十分影响用户体验。
code splitting 怎么做？
主要有两种方式：
①路由懒加载
②分离业务和第三方库（vendor）
具体的细节，大家可以移步到我这篇文章哦。
前端性能优化，如何提高首屏加载速度？
三：微信小程序分包
微信小程序分包，就是我们今天的主题。有时候我们的小程序太大，首次打开小程序的时候回比较慢，这个时候我们可以试试分包操作。分包可以让用户在操作小程序的时候按需下载资源（用户在进入某些页面的时候才去下载相应的资源，可以加快小程序的速度，优化用户体验。）。
目前小程序分包大小有以下限制：
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
1.小试牛刀： 我把两张图片比较大的图片资源放进项目，然后打包。
当我们上传代码的时候就会发现会有提示：分包大小超过限制。
我们点击查看看文件列表，就会发现我们刚刚的两张图就已经占了1M多。加上我们其他的业务代码，就超过2M了。
这是因为微信小程序代码有个2M限制，所以有的时候放图片都得忍着点，不敢把太大的放在小程序里面，只能放远程；但是随着项目不断迭代更新，代码图片越来越多，开发的时候更加小心翼翼。是不是很不舒服，还能不能让我舒服的敲代码了。
- 微信小程序每个分包的大小是2M，总体积一共不能超过20M。
- 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
- QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
- 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。
为了模拟代码过大，必须分包，我特意复制了40多个文件，并在pages.json中配置的page中配置，来模拟项目业务代码过大的情况。
当我们打包上传，就会发现同样会提示：分包大小超过限制，查看列表，就能发现我们刚刚模拟的业务代码。
因小程序有体积和资源加载限制，各家小程序平台提供了分包方式（这里使用的是uni-app技术），优化小程序的下载和启动速度。
所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。
所以接下来，我们就需要对这些业务代码进行分包。
tips:值得注意的是，如果你要分包，你要分包的文件就不能再放在pages下面来了，不然就会分包报错：pages不应该在分包subPackages[x] 中
所有我们需要把刚刚的文件夹放在与pages同级的目录，并且引入路径也要做对应的调整。
再次打包上传，还是会提示有限制。查看列表，就是刚刚改写的路径，说明我们改写路径成功了。
改写成功后，就开始正式分包了。
就需要你在page.json中，把刚刚的业务代码复制在subPackages下面，并使用相对路径。
我们来看看打包后的app.js
分包完成之后，我们再次打包上传，发现上传成功了。
登录我们的管理后台瞄一眼，完美!
总结：微信小程序分包并不难，需要注意的是微信小程序每个分包的大小是2M，总体积一共不能超过20M。如果要分包，那么就需要把分包的模块放在与pages同级，而不能放在下级，放在同级后，要分包也必须得整个模块进行分包。不能同一个模块有的分包，有的不分包，不然微信会报错。首页、公共模块的方法、基础组件等通用模块一定要放在主包，这样在加载分包的时候，保证通用模块存在。最终打包上传的是app.js，在里面可以看见我们分包的实际情况。
今天的分享就到这里吧，That's all. Thank you.
