前端【小程序】05-小程序基础篇【分包加载】

一、分包加载

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html​

　　分包加载是优化小程序加载速度的一种手段。

1.1 为什么？​

• 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
• 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
• 配置文件能忽略的只有静态资源，代码无法被忽略
• 拆分出多个包，这样首次加载小程序的时候只会加载主包，主包越小，加载速度越快，用户体验越好

1.2 使用分包​

　　在全局配置app.json中使用 subPackages 来配置分包的根目录和分包中的页面路径：

app.json文件

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [  // 分包配置
    {
      "root": "pkg_house", // 指定分包的根目录
      "pages": [  // 指定分包中的页面路径，有多个页面则多个路径
        "list/list",
        "detail/detail"
      ]
    },
    {
      "root": "pkg_repair", 
      "pages": [
        "list/list",
        "detail/detail"
      ]
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

• root 指定分包的根目录
• pages 指定分包中的页面路径
• tabBar的页面不允许分包，必须包含在主包中
• 所有包不超过20M

　　注：根目录和路径不存在时，小程序开发者工具会自动创建。

跳转到分包页面和之前正常写法一样，写相对或者绝对路径

<navigator url="/pkg_house/list/list">跳转到分包页面</navigator>

 

1.3 分包预加载​

　　在实际使用分包的过程中，纯粹的按需加载也不是最优的方案，可以将即将访问的页面的包预先下载下来，这样能进一步提升小程序加载的速度，通过 preloadRule 来配置预加载的包：

　　文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html

app.json文件

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [
    {
      "root": "pkg_house",
      "pages": [
        "list/list",
        "detail/detail"
      ]
    },
    {
      "root": "pkg_repair",
      "pages": [
        "list/list",
        "detail/detail"
      ]
    }
  ],
  "preloadRule": {
    // key 是页面路径，value 是进入此页面的预下载配置
    "pkg_house/list/list": {
      "network": "all",           // 不限网络环境
      "packages": ["pkg_repair"]  // 进入此pkg_house/list/list页面, 预加载分包pkg_repair
    },
    "pkg_house/detail/detail": {
      "packages": ["pkg_repair"]  // 指定要预加载的分包root或者name
    }
  }
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

　　上述代码的含义是在加载 pages/framework/index 页面时，自动的去加载 subpkg_user 这个分包，等到要访问这个分包中的页面时会直接打开。

　　preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅wifi下预下载