在微信小程序中默认只有一个主包，在项目打包时，所有的资源(页面及资源等)都被放到了主包中，如果主包体积超出了 2MB 就无法编译了。

文章目录

对于以上的问题，可以采取分包，分包就相当于将指定的页面及资源，单独放在一个包中，不在放到主包中，从而减少主包的体积，本篇文章中小程序采由UniApp框架开发。

1.分包简介

分包的上限及条件： 开发者可以分N个包，但是要求每个包不允许超过2MB，整个小程序所有分包大小不能超过20MB。

分包的好处： 主包中一般存放的都是Tabbar页面，如果将非Tabbar页面从主包中移除，则可以加快加载速度。

分包中的内容，默认不加载，只有需要用到它时，再去现场加载，当然，可以通过分包预下载去提前加载分包中的内容。

2.创建分包

您想分包的目标，如果是 Tabbar 页面或者是多个分包中需要用到的公共资源，请放到主包中：这是因为分包可以访问主包中的资源，而主包不允许访问分包中的资源。

现在有一个 用户端[公共的]，一个 管理端[需要权限]，我们可以将用户端放到主包中，将管理端的内容分成一个包。

因为用户在进入小程序时，默认进入的都是用户端，没必要将管理端的资源也加载上，只有当拥有权限并且在切换到管理端时，我们在去加载管理端的内容。

// 当前文件结构树[未分包]，默认都存放到pages中，当分包后，pages中的内容就是主包的内容。
pages:
 |- ... //假设用户端页面有N个，这里就不写了
 |- backStage/index/index.vue:管理端首页
 |- backStage/xxxxx/index.vue:管理端第二页

/*
分包准备：
 1.新建一个文件夹，和pages同级，*每个文件夹相当于一个分包*，并将静态资源命名为static然后放到分包的根目录下。
 2.在该分包下新建一个pages文件夹，该文件夹中存储页面文件夹。
 3.然后将分包中的内容，从主包中移走。
*/

// 主包
pages:
 |- ...//用户端的内容

// 管理端分包
backStagePackage:
 |- pages:管理端页面
    |- index/index.vue:管理端首页
    |- xxxxx/index.vue:管理端第二页
 |- static:静态资源

当页面创建完成后，打开 manifest.json 文件，在 mp-weixin 节点中的 根节点下 ，添加如下配置，表示开启分包。

"optimization": {
    "subPackages": true
}

接着打开 pages.json 配置分包，在 pages属性 同级节点下，添加 subPackages: []，它的每一个元素是一个对象，每个元素及为一个包。

使用管理端分包为例，首先在数组中添加一个对象，对象中拥有：root,pages,name,independent 字段。

root:
 - 分包文件夹的名称: backStagePackage。
pages:
 - 值为一个数组: 每一个元素填写分包中的页面路径即可(不需要加上分包名)。
name:
 - 分包别名: 分包预下载时可以使用。
independent:
 - 是否开启独立分包: 默认不开启(false)。
"subPackages": [
    {
        "root": "backStagePackage",
        "pages": [
            "pages/index/index",
            "pages/xxxxx/index"
        ]
    }
]

这样，分包就完成了！