如何利用微信小游戏的分包加载机制突破4M代码包体积限制

相信你们度过了一个不错的端午假期，在端午前夕，即6月15日晚上，微信小游戏宣布支持分包加载功能，白鹭引擎在端午节后第一天正式支持分包加载机制。在正式向开发者介绍如何使用前，我先为各位解读一下我对微信提供这个 API 的理解。

 

如何评论微信小游戏中新加入的分包加载 API ？

 

首先小标题先来一个标准的知乎体并自问自答。先说结论，我认为微信小游戏目前支持了分包加载，并将最大代码包体积从 4M 提高到 8M，并非鼓励开发者将包体积提高到8M，偏偏相反是但愿开发者将包体积尽量下降。

 

目前微信小游戏存在的一个问题是，若是开发者的包体积较大（假设4M），游戏会长时间停留在小游戏的启动页（俗称白屏），用户卡在白屏阶段分为如下两种状况：

 

• 下载时间过长，这是因为微信小游戏的初始包体积较大，而且用户的网络较差引发的

• 首次渲染时间过长，这是因为用户代码体积较大，JS引擎首次解析较慢引发的

 

微信小游戏之因此提供了分包的策略，最主要的目标是但愿开发者将包体积尽量下降，将首屏加载的压力分散到游戏逻辑中，保证尽快给玩家一个能够交互的界面，而不是停留在微信小游戏的启动页中。

 

为此，微信小游戏本次更新中不单单更新了分包加载，也在管理后台的运维中心提供了加载性能监控功能，容许开发者针对上述数据数据分析功能，正是但愿经过这些数据分析能力帮助开发者更精细化的优化小游戏的加载效率。

 

 

所以，将微信的本次更新简单粗暴的理解为“包体积从4M提高到了8M”是片面的。而且我我的也很不建议开发者直接这样作，由于目前您仍然要兼容微信不存在分包下载的老版本，若是您将您的游戏直接放置了8M的分包，就会在用户首次启动时必须加载完8M资源才能跳出启动页，这也不是很好的用户体验。

 

为此，白鹭引擎的策略是，引入一个 loading.js 的逻辑，并将其与白鹭引擎的核心代码（以及最简化的loading资源）打包为主包，而后在 loading.js 中去动态下载子包，并在下载过程当中借助已经加载的白鹭引擎为用户渲染出 Loading 界面。

 

做为一位多年前从事 Flash 页游开发的开发者，我之因此将微信分包策略与白鹭引擎采用这种方式结合，是由于几乎全部的 Flash 页游都会至少存在两个 SWF 文件（能够近似理解为编译后的代码包文件），第一个SWF文件只负责加载逻辑并保持其体积尽量小，而真正的业务逻辑因为代码总编译体积很大，都会放在后续加载。

最后用一张图概述：

 

 

如何在白鹭引擎中使用分包下载

首先宣布一个好消息，借助于白鹭引擎 5.1 版引入的新的自定义构建管线功能，您无需升级白鹭引擎至最新版本，而只是在构建管线中添加一些插件，并调整少许逻辑就能够完成此改动。

 

考虑到这项功能是引擎工程师利用端午节的这几天快速实现出来的，咱们决定暂时将这个功能不放在引擎中，而是给开发者提供一个示例项目，开发者应首先在引擎提供的示例项目中将该功能跑通，而后再将其应用于您的正式项目。

步骤一：下载示例项目

您能够在 

https://github.com/himuil/subPackageDemo 

下载示例项目，该项目能够直接运行看到效果

该项目使用了Egret 5.2.3 版本，可是您也能够将 egretProperties.json 中的 engineVersion 和 compilerVersion 调整为您的引擎版本，咱们支持 5.1 以上的版本。

 

步骤二：将该项目移植进您的游戏

• 将 scripts/wxgame/subpackage.ts 拷贝进您的项目

• 修改 config.wxgame.ts，将 ManifestPlugin 替换为 SubPackagePlugin （注意，您须要修改 build 和 publish）

• 修改 config.wxgame.ts 中的 CleanPlugin，将 subpackage 对应的目录清除

• 将示例项目的 EgretSubpackageLoading.js 拷贝进您的微信小游戏项目

• 修改微信小游戏项目的 game.json，参考示例项目，引入 subpackages 属性

• 修改微信小游戏项目的 game.js，参考示例项目，重点是添加调用 wx.loadSubPackage 的逻辑

 

步骤三：高级用法

• 您能够经过修改 SubPackagePlugin 的参数和 game.json 的 subpackage 字段配置多个 subpackage

• 您能够在游戏过程运行中，而不是游戏初始化时加载某个 subpackage，好比您能够在游戏启动时只加载一个登录页面，在用户登录以后再加载游戏主逻辑。

• 每一个 subpackage 能够包含多个 js 文件