「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」
随着项目的发展，业务日益复杂，小程序的包体也越来越大。一方面，小程序包体如果太大，首次加载的时候时长也较长，导致体验较差，如果加载时间过长会导致一部分用户流失。另一方面，微信小程序官方也对包体有一定大小限制，因此对小程序分包进行分包操作是比较常规的优化手段之一。
微信小程序的包体大小限制
一般来说，主包不能超过2M，采用分包后大小限制如下
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
因此，分包后大小加上压缩代码等操作基本能满足业务需求，那么怎样进行分包呢？
举个例子，原本项目结构三个页面，一个index.tsx主页，一个user.tsx个人中心页，这两个都是tabBar页面，还有一个是detail.tsx详情页，未分包前项目配置如下：
{
"pages":[
"pages/index",
"pages/detail",
"pages/user",
],
}
使用分包
由于微信小程序规定，tabBar页面必须在主包里，因此我们不能对index.tsx主页和user.tsx个人中心页进行分包，但是我们可以把detail.tsx详情页进行分包，把详情页相关代码按照如下项目路径整理packageDetail/pages/detail.tsx，然后修改相关配置
{
"pages":[
"pages/index",
"pages/user"
],
"subpackages": [
{
"root": "packageDetail",
"name": "packageDetail",
"pages": [
"pages/detail",
]
}
]
}
此时由于我们修改了详情页代码的项目位置，其他要跳转到详情页的代码也要同步修改
wx.navigateTo({
url: `/packageDetail/pages/detail`
});
还有一点注意，分包后，实际我们没进入详情页时，对应的代码包是没有加载的，这个时候用户首次从主页跳到详情页，则会出现加载等待界面，也是体验不够友好，实际上我们可以利用微信小程序提供的分包预加载配置功能
使用分包预下载
例如我们可以在wifi环境下，在进入主页时，可以对详情页的代码包进行预下载，修改配置如下：
{
"pages":[
"pages/index",
"pages/user"
],
"subpackages": [
{
"root": "packageDetail",
"pages": [
"pages/detail",
]
}
],
preloadRule: {
'pages/index': {
network: 'wifi',
packages: ['packageDetail']
},
}
}
注意预下载的包可以不指一个，但是他们是共用预下载的2M的
除此之外，分包是可以使用主包的js函数的，但是下面说的独立分包就不可以了
使用独立分包
独立分包假如配置相对独立，它是可以不用等主包下载完再加载的，某些业务场景可能比较合适，例如分享活动页，独立分包的配置相对来说也挺简单的，把对应分包设置"independent": true即可
{
"pages":[
"pages/index",
"pages/user"
],
"subpackages": [
{
"root": "packageDetail",
"pages": [
"pages/detail",
],
"independent": true
}
],
]
}
结语
以上是我使用微信小程序分包的小心得，希望能对大家有帮助～你的赞对我来说很重要，希望能获得你的赞作为鼓励，谢谢啦～
更多文章推荐：
「不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验」
