百度智能小程序 普通分包

某些情況下，開發(fā)者需要將智能小程序劃分成不同的子包，在構(gòu)建時打包成不同的分包，用戶在使用時按需進行加載。

在智能小程序的打包中，默認會有一個主包，主包中包含了啟動頁面，和所有分包都會用到的公共資源/JS 腳本。而分包則是根據(jù)開發(fā)者的配置劃分的。

整個小程序所有分包大小不超過 8M，單個分包/主包大小不能超過 2M。
在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，如果用戶需要打開分包內(nèi)某個頁面，客戶端會把對應分包下載下來，下載完成后再進行展示。

將智能小程序按照業(yè)務特點合理的分包，可以提升智能小程序的加載速度，優(yōu)化用戶體驗。

使用方法

在開發(fā)者工具中預覽效果

假設支持分包的小程序，目錄結(jié)構(gòu)如下：

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

開發(fā)者通過在 app.json subPackages 字段聲明項目分包結(jié)構(gòu)：

{
    // 主包，推薦只保留最常用的核心頁面：啟動頁、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"
        }]
    }
}

主包頁面跳轉(zhuǎn)分包頁面

<!-- 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（主包）內(nèi)。

引用原則

• 兩個分包之間無法互相引用對方包中的 js，但是分包中可以引用主包，或者自己分包內(nèi)的 js。