使用分包

在小程序的开发过程中，开发者可能会遇到以下几个问题：

• 小程序代码包的体积不断增加，最后导致代码包大小超过后台的提交限制
• 小程序由于体积太大加载太慢，用户体验较差
• 某些场景（例如活动页、临时推广）只需要引导用户快速打开小程序以进行业务展开，加载其他页面的时间太长导致用户流失
• ...

小程序框架提供了分包功能，开发者可以通过配置，将小程序划分成不同的子包，在不同的入口场景使用时按需加载。

每个小程序都会包含一个主包，即原来未使用分包逻辑时的小程序。默认启动页面、TabBar 页面只能放置在主包中；使用分包配置后，按照开发者配置的分包信息，分包中只包含配置中的页面和代码。

小程序启动时，框架会首先加载主包内容，执行 App 的启动逻辑，然后再判断当前打开的页面是否为分包页面：

• 如果打开的是分包页面，加载分包内容，打开页面
• 如果不是分包页面，按主包的页面配置，打开页面

合理使用分包可以较好地优化小程序的加载时间，提升用户体验。

如何使用分包

首先开发者需要根据项目需求规划目录结构，将需要分包的代码整理到单独的目录中，如

    ├── app.js
    ├── app.json
    ├── pages
    │  ├── index
    ├── packages
    │  ├── A
    │ │ └── pages
    ├── ├── B
    │ │ └── pages

开发者可以根据自己的目录规划在 app.json 中添加subPackages字段配置小程序分包信息。

基础库 1.8.0 以上支持分包

{
    "pages": [
        ...
    ],
      ...
    "subPackages": [
        {
            "root": "packages/A",
            "pages": [
                "pages/index/index",
                ...
            ]
        },
        {
            "root": "packages/B",
            "pages": [
                "pages/index/index",
                ...
            ]
        },
        ...
    ],
    ...
}

subPackages 字段中每个分包项的配置如下：

字段	类型	必填	说明
root	string	是	分包根目录路径
pages	string[]	是	分包包含的、相对于分包根目录的页面路径

注意事项

关于配置：

• app.json 中pages字段不能包含分包中的页面
• app.json 中tabBar页面不能是分包页面
• ubPackages中配置的分包根目录root不能嵌套，即分包的根目录不能是其他分包的子目录

关于开发：

• 主包中不能require分包内的代码
• 分包中不能require其他分包内的代码，但可以require主包内的代码
• npm 模块在编译时会自动放入主包处理

包大小限制：

• 主包大小不能超过2M
• 分包大小不能超过2M

简单来说，代码里面不能引用“不确定是否已经加载的代码”，这部分的处理由框架直接进行报错处理，避免出现线上问题。