小程序分包加载

为什么要分包？
可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作

主包

• 放置默认启动页面/TabBar 页面
• 所有分包都需用到的公共资源/JS 脚本
• 小程序启动时，默认会下载主包并启动主包内页面
• 主包大小不能超过 2M

分包

• 用户进入分包内某个页面时才会下载对应分包，下载完成后展示
• 整个小程序所有分包大小不超过 8M
• 单个分包/主包大小不能超过 2M

分包配置

//app.json
{
  "pages": [
    "page/tabBar/component/index",
    "page/tabBar/API/index"
  ]
  "subPackages": [
    {
      "root": "page/component/",  //分包根目录
      "pages": [ //分包页面路径，相对与分包根目录
        "pages/view/view",
        "pages/scroll-view/scroll-view",
      ]
    },
    {
      "root": "page/API/",
      "pages": [
        "pages/login/login",
        "pages/get-user-info/get-user-info",
      ]
    }
  ]
}

组件 和 接口 在两个分包

独立分包
从独立分包中页面进入小程序时，不需要下载主包

开发者将某些具有一定功能独立性的页面配置到独立分包中，独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

用independent配置

//app.json
{
  "pages": [
    "page/tabBar/component/index",
    "page/tabBar/API/index"
  ]
  "subPackages": [
    {
      "root": "page/component/",
      "pages": [
        "pages/view/view",
        "pages/scroll-view/scroll-view",
      ]
    },
    {
      "root": "page/API/",
      "pages": [
        "pages/login/login",
        "pages/get-user-info/get-user-info",
      ],
      "independent": true
    }
  ]
}

独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件

分包预下载
由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": [""]
    }
  }
}
//preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置
//packages: [""]表示主包