小程序开放平台

文档中心
起步
游戏引擎
运行时
基础能力
网络
存储
文件系统
渲染
分包加载
权限
模块化
服务端API
开放能力
性能优化

分包加载

开发
>
开发指南
>
基础能力
>
分包加载
>
更新时间:2024-11-13 19:05:40

随着小游戏的玩法越来越丰富,开发者对于扩大包大小的需求越来越强烈,所以我们推出了小游戏分包加载这一个功能。所谓的分包加载,即把游戏内容按一定规则拆分这几包,在首次启动时先下载必要的包,这个必要的包我们称为「主包」,开发者可以在主包内触发其它分包的下载,从而把首次启动的下载耗时分散到游戏运行中。

开发者可以使用框架封装的分包加载能力,也可以在不使用框架的情况下直接使用 game.json 配置分包。详情在下面内容介绍。

分包加载包大小的限制

目前小游戏分包大小有以下限制:

  • 整个小游戏所有主包+分包大小不超过 20M(开通虚拟支付后的小游戏不超过30M)
  • 主包不超过 4M
  • 单个普通分包不限制大小

注意:小红书小游戏暂不支持 独立分包

使用方法

1. 分包配置

使用小游戏框架,可以在工具 Project 窗口中选中任意的文件夹,可以在 inspector 窗口中发现选项“设置为代码分包”,并需要给这个分包定一个分包名。设置成为了代码分包的文件夹下面所有的目录或是代码都会打包成一个个「分包」。

没有配置的目录和 js,将会被打包到主包中。但是配置了分包的文件夹下面的资源并不会被打包到代码分包内,因为会扩大小游戏的包体积,所以没必要打包进去,而是在构建环节放在资源包存储在 CDN 中。

直接配置文件

不使用小游戏框架的情况下,开发者可以自定配置

game.json
配置。需要先在
game.json
配置分包信息。

假设游戏的目录结构如下:

├── game.js
├── game.json
├── images
│   ├── a.png
│   ├── b.png
├── stage1
│   └── game.js
│   └── images
│       ├── 1.png
│       ├── 2.png
└── stage2.js

game.json
中的配置:

{
  ...
  "subpackages": [
    {
      "name": "stage1",
      "root": "stage1/" // 可以指定一个目录,目录根目录下的 game.js 会作为入口文件,目录下所有资源将会统一打包
    }, {
      "name": "stage2",
      "root": "stage2.js" // 也可以指定一个 JS 文件
    }
  ]
  ...
}

配置在

subpackages
字段内的目录或 js 文件,将按照配置打包成一个个「分包」,没有配置在
subpackages
中的目录和 js,将会被打包到主包中。

2. 分包加载

我们提供了 xhs.loadSubpackage() API 来触发分包的下载,调用

xhs.loadSubpackage
后,将触发分包的下载与加载,在加载完成后,通过
xhs.loadSubpackage
的 success 回调来通知加载完成。

同时,

xhs.loadSubpackage
会返回一个 LoadSubpackageTask,可以通过 LoadSubpackageTask 获取当前下载进度。

示例代码:

const loadTask = wx.loadSubpackage({
  name: 'stage1', // name 可以填 name 或者 root
  success: function(res) {
    // 分包加载成功后通过 success 回调
  },
  fail: function(res) {
    // 分包加载失败通过 fail 回调
  }
})

loadTask.onProgressUpdate(res => {
  console.log('下载进度', res.progress)
  console.log('已经下载的数据长度', res.totalBytesWritten)
  console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})