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

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是进入此页面的预下载配置。

preloadRulevalue的配置项

  • 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__"]
  }
}