百度智能小程序 普通分包

某些情况下，开发者需要将智能小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在智能小程序的打包中，默认会有一个主包，主包中包含了启动页面，和所有分包都会用到的公共资源/JS 脚本。而分包则是根据开发者的配置划分的。

整个小程序所有分包大小不超过 8M，单个分包/主包大小不能超过 2M。
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。

将智能小程序按照业务特点合理的分包，可以提升智能小程序的加载速度，优化用户体验。

使用方法

在开发者工具中预览效果

假设支持分包的小程序，目录结构如下：

├── app.js
├── app.json
├── app.css
├── packageA
│   └── pages
│       ├── pageOne
│       │   
│       └── pageTwo
│ 
├── packageB
│   └── pages
│       ├── pageThree
│       │   
│       └── pageFour
│           
├── pages
│   └── index
│   │   
│   └── tabOne           
└

开发者通过在 app.json subPackages 字段声明项目分包结构：

{
    // 主包，推荐只保留最常用的核心页面：启动页、tab页及公共资源
    "pages": [
        "pages/index/index",
        "pages/tabOne/tabOne"
    ],
    "subPackages": [
        {
            "root": "packageA/pages",
            "name": "packageOne",    
            "pages": [
                "pageOne/pageOne",
                "pageTwo/pageTwo"
            ],
            "independent": true
        },
        {
            "root": "packageB/pages",
            "name": "packageTwo",    
            "pages": [
                "pageThree/pageThree",
                "pageFour/pageFour"
            ],
            "independent": true
        }
    ],
    "tabBar": {
        "borderStyle": "black",
        "color": "#000000",
        "selectedColor": "#000000",
        "list": [{
            "pagePath": "pages/index/index",
            "text": "首页"
        },{
            "pagePath": "pages/tabOne/tabOne",
            "text": "tabOne"
        }]
    }
}

主包页面跳转分包页面

<!-- index.swan -->
<view class="navigate-list">
    <navigator url="/packageA/pages/pageOne/pageOne" class="navigator">
        跳 pageOne
    </navigator>
</view>

subPackages 中，每个分包的配置有以下几项：

打包原则

• 声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中；
• app（主包）也可以有自己的 pages（即最外层的 pages 字段）；
• 首页的 TAB 页面必须在 app（主包）内。

引用原则

• 两个分包之间无法互相引用对方包中的 js，但是分包中可以引用主包，或者自己分包内的 js。