微信小程序中使用分包、独立分包、分包预下载的使用和注意事项

TZOF
617 阅读3分钟

注意事项

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。
每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。官方文档

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载

分包大小限制

  • 整个小程序所有分包大小不超过30M（服务商代开发的小程序不超过 20M）。
  • 单个分包/主包大小不能超过2M。

打包原则

  • tabbar页面必须在主包中。
  • 主包也可以有自己的pages，即最外层的pages目录。
  • 按subPackages配置路径进行打包，配置路径外的目录将被打包到主包中。
  • 分包之间不能相互嵌套，subPackages的根目录不能是另外一个subPackages内的子目录

引用原则

  • 主包不可以引用分包的资源，但是分包可以使用主包的公共资源。
  • 分包与分包之间资源无法相互引用，分包异步化时不受此限制。
  • 独立分包不能使用主包和分包内的资源。app.wxss对独立分包无效。App只能在主包中定义。

使用分包和独立分包

  • app.json内配置subPackages使用分包(数组形式，可配置多个分包)。
  • subPackages内分包配置项independent: true开启独立分包。

subPackages配置项

  • root：分包根目录。
  • name：分包名称，分包预下载时可以使用。
  • pages：分包页面路径，相对于分包根目录。数组形式，同一个分包内可以配置多个页面。
  • independent：是否开启独立分包。
"subPackages": [
  {
    "root": "packageA",
    "name": "list",
    "pages": [
      "list/list",
      "test/test"
    ]
  },
  {
    "root": "packageB",
    "name": "userB",
    "pages": [
      "userB/userB"
    ],
    "independent": true
  }
]

image.png image.png

分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成。

  • app.json内使用preloadRule配置分包预下载。
  • preloadRule中，key是页面路径，value是进入此页面的预下载配置。

preloadRule内value的配置项

  • packages：进入页面后预下载分包的root根目录或name名称，__APP__ 表示主包。
  • network：在指定网络下预下载。all不限网络，wifi仅wifi（默认值）。
"preloadRule": {
  "pages/index": {
    "network": "all",
    "packages": ["important"]
  },
  "sub1/index": {
    "packages": ["hello", "sub3"]
  },
  "sub3/index": {
    "packages": ["path/to"]
  },
  "indep/index": {
    "packages": ["__APP__"]
  }
}
avatar
文章
阅读
粉丝